canvas的点点滴滴

1.<canvas id="myCanvas" width="200" height="200">< /canvas>

*宽高写在内部跟样式有区别的（样式设置-画出的图形宽高改变，内部设置-画出的图形宽高不变）

IE 6 7 8不支持 <canvas>标签

2.每个画布都必须要有一个context（上下文）的定义，如下面代码所示。就目前的情况来说，官方规范只承认一个2D环境：

<canvas id="myCanvas" width="200" height="200">< /canvas>

var cvs = document.getElementById("myCanvas");

var ctx = cvs.getContext("2d");

在标识画布并指明了它的上下文之后，就可以开始绘画了

3.Canvas的坐标（以左上顶点为原点坐标，向右向下为正方向）

4.

ctx.beginPath() ：开始一个路径

ctx.moveTo(x,y)： 路径移到画布中的指定点 , 即起点

ctx.lineTo(x,y) ：添加一个新点，画线

......

ctx.closePath() ：关闭绘制路径      //是否需要关闭要视实际情况而定；

ctx.fillStyle：用来设置填充颜色

ctx.fill() ：填充已定义好的路径

ctx.lineWidth：画线的宽度

ctx.strokeStyle：用来设置描边颜色

ctx.stroke() ：绘制已定义好的路径

 5.

贝塞尔曲线（借助贝赛尔曲线生成工具）

quadraticCurveTo (cx,cy,ex,ey)

二次贝塞尔曲线，一个控制点，一个结束点

bezierCurveTo (cx1,cy1,cx2,cy2,ex,ey)

三次贝塞尔曲线，两个控制点，一个结束点

6.

关于圆形：（角度为顺时针记忆，以右中为起点）

 

 

arc(x,y,r,sa,ea,true/false)：

x、y为圆心坐标，r为半径，

sa、ea分别为起始角度和结束角度，

true是逆时针画圆，false是顺时针画圆；此属性不写默认为false；

360度角即2PI弧度，1度就是2PI/360=PI/180弧度，

90度就是2PI/360*90=PI/2弧度(其他的角度自行计算)

7.

清除画布

ctx.clearRect(x,y,width,height):

x : 清除起点横坐标

y : 清除起点纵坐标

width : 清除长度

height : 清除高度

清除画布：

ctx.clearRect(0,0,cvs.width,cvs.height);