24个canvas基础知识小结.docVIP

现把canvas的知识点总结如下，以便随时查阅。

1、填充矩形fillRect(x,y,width,height);

2、绘制矩形边框strokeRect(x,y,width,height);

3、擦除矩形clearRect(x,y,width,height);

4、填充样式fillStyle=red;样式可以为颜色、渐变和图像。

5、描边样式strokeStyle=red;

6、描边线条的宽度lineWidth=4;

7、线条末端形状lineCap=butt;butt(对接)/round(圆)/square(方)，默认情况下是butt;

8、线条相交样式lineJoin=miter;miter(尖角)/round(圆角)/bevel(斜角),默认尖角;

9、开始绘制路径beginPath();

10、结束路径closePath();创建路径后，如果想绘制一条连接到路径起点的线条，可以调用closePath();

11、绘制圆弧arc(x,y,radius,startAngle,endAngle,true/false);

12、绘制弧线arcTo(x1,y1,x2,y2,radius)从上一点开始绘制一天弧线，到x2,y2为止，并且以给定的半径radius穿过x1,y1;

13、moveTO(x,y);将绘图游标移动到（x,y）,不画线

14、lineTo(x,y);从上一点开始绘制一条直线

15、二次贝塞尔曲线：quadraticCurveTo(cx,cy,x,y);从上一点开始绘制二次曲线，到x,y为止，cx,cy作为控制点。

16、三次贝塞尔曲线：bezierCurveTo(cx1,cy1,cx2,cy2,x,y);从上一点开始绘制二次曲线，到x,y为止，cx1,cy1和cx2,cy2作为控制点。

17、rect(x,y,width,height);从点x,y开始绘制矩形，宽度和高度分别由width和height指定。这个方法绘制的是矩形路径，而不是独立形状。

18、绘制文本：

(1)填充文本：fillText(hello,x,y,width);width为可选的最大像素宽度,如果文本大于最大宽度，则文本会收缩以适应最大宽度。

(2)文本描边：strokeText(hello,x,y,width);width为可选的最大像素宽度。

(3)文本样式：font=bold14pxArial;

(4)水平文本对齐：textAlign=start;//start,end,left,right,center。默认值:start。以文字的起始点(x,y)为基点的纵轴进行对齐。

(5)垂直文本对齐：textBaseline=alphabetic;//top,hanging,middle,alphabetic,ideographic,bottom。默认值：alphabetic。以文字的起始点(x,y)为基点的横轴进行对齐。

(6)文本的宽度：vartext=hello;varlength=context.measureText(text)；参数text为所需要绘制的文字

19、变换

(1)rotate(angle):围绕原点旋转图像angle弧度。

也可以使用transform(Math.cos(angle*Math.PI/180),Math.sin(angle*Math.PI/180),-Math.sin(angle*Math.PI/180),Math.cos(angle*Math.PI/180),0,0);

(2)scale(x,y):缩放图像。也可以使用transform(x,0,0,y,0,0);

(3)translate(x,y):将坐标原点移动到x,y，执行这个变换之后，坐标0,0会变成之前由x,y表示的点。也可以使用transform(1,0,0,1,x,y);

(4)transform(lt;numbergt;,lt;numbergt;,lt;numbergt;,lt;numbergt;,x,y);

(5)setTransform(lt;numbergt;,lt;numbergt;,lt;numbergt;,lt;numbergt;,x,y);将变换矩阵重置为默认状态，然后再调用transform();

20、图形组合

代码如下:

context.fillStyle=blue;

context.fillRect(10,10,100,100);

context.glob