24个canvas基础知识小结
现把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="bold 14px Arial";
(4) 水平文本对齐：textAlign='start'; // start, end, left,right, center。默认值:start。以文字的起始点(x,y)为基点的纵轴进行对齐。
(5) 垂直文本对齐：textBaseline='alphabetic'; //top, hanging, middle,alphabetic, ideographic, bottom。默认值：alphabetic。以文字的起始点(x,y)为基点的横轴进行对齐。
(6) 文本的宽度：var text="hello"; var length=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(<number>, <number>, <number>,<number>,x, y);
(5) setTransform(<number>, <number>, <number>,<number>,x, y);将变换矩阵重置为默认状态，然后再调用transform();
20、图形组合
代码如下:
context.fillStyle="blue";
context.fillRect(10,10,100,100);
context.globalCompositeOperation='lighter'; 可选值如/* */内。
context.fillStyle="red";
context.arc(110,60,50,0,Math.PI*2,false);
context.fill();
/*
source-over(默认值)：
destination-over：在原有图形之下绘制新图形
source-in：新图形与原有图形作in运算，只显示新图形中与原有图形相重叠的部分
destination-in：原有图形与新图形作in运算，只显示新图形中与原有图形相重叠的部分
source-out：新图形与原有图形作out运算，只显示新图形中与原有图形不重叠的部分
destination-out：新图形与原有图形作out运算，只显示新图形中与原有图形不重叠的部分
source-atop：只绘制新图形中与原有图形重叠的部分和未被重叠的原有图形