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