学习canvas

canvas简介

<canvas> 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。

它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。后来，有人通过Gecko内核的浏览器 (尤其是Mozilla和Firefox)，Opera和Chrome和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。

Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域。JavaScript代码可以访问该区域，类似于其他通用的二维API，通过一套完整的绘图函数来动态生成图形。

Mozilla 程序从 Gecko 1.8 (Firefox 1.5)开始支持 <canvas>, Internet Explorer 从IE9开始<canvas> 。Chrome和Opera 9+ 也支持 <canvas>。

<canvas>看起来和<img>标签一样，只是 <canvas> 只有两个可选的属性 width、heigth 属性，而没有 src、alt 属性。

如果不给<canvas>设置widht、height属性时，则默认 width为300、height为150,单位都是px。也可以使用css属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用css属性来设置<canvas>的宽高。

支持<canvas>的浏览器会只渲染<canvas>标签，而忽略其中的替代内容。不支持 <canvas> 的浏览器则会直接渲染替代内容。

双圆demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;padding: 0;
        }

        .box{
            text-align: center;
        }
        #myCanvas{
            background: #eee;
        }
    </style>
</head>
<body>
   <div class="box">
        <canvas id="myCanvas" height="400" width="400"></canvas>
   </div>
<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");

cxt.fillStyle="green";
cxt.beginPath();
cxt.arc(200,200,190,0,Math.PI,false);
cxt.closePath();
cxt.fill();

cxt.fillStyle="#fff";
cxt.strokeStyle='red'
cxt.beginPath();
cxt.arc(200,200,180,0,Math.PI*2,true);
cxt.closePath();
cxt.stroke();
cxt.fill();


</script>
</body>
</html>

1、dom.getContext('2d')

2、fillStyle 填充颜色

lineWidth 线条宽度 cxt.lineWidth='10'

3、strokeStyle 线条颜色

4、beginPath() 开始一条路径，或重置当前的路径

　 closePath()从当前点到开始点的路径

5、fill填充当前绘图（路径）、stroke绘制已定义的路径

6、arc(x,y,r,sAngle,eAngle,counterclockwise);画圆

参数	描述
x	圆的中心的 x 坐标。
y	圆的中心的 y 坐标。
r	圆的半径。
sAngle	起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle	结束角，以弧度计。
counterclockwise	可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

7、moveTo(x,y) 定义线条开始坐标

lineTo(x,y) 定义线条结束坐标

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

8、fillRect(x,y,width,height); X、Y为坐标,左上角

　　fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。

　　提示：请使用fillStyle属性来设置用于填充绘图的颜色、渐变或模式。

　　strokeRect 绘制无填充的矩形.
10、clearRect(x,y,width,height);清除矩形9、rect(x,y,width,height);

参考网址:http://www.w3school.com.cn/tags/html_ref_canvas.asp