24个canvas基础知识小结

1、现把canvas的知识点总结如下，以便随时查阅。1、2、3、4、5、6、7、8、9、填充矩形fillRect(x,y,width,height);绘制矩形边框strokeRect(x,y,width,height);擦除矩形clearRect(x,y,width,height);填充样式fillStyle=red;样式可以为颜色、渐变和图像。描边样式strokeStyle=red;lineWidth=4;lineCap=butt;butt(对接)/round(圆)/square(方)，默认情况下是butt;lineJoin=miter;miter(尖角)/round(圆角)/bevel(斜角)

2、，默认尖角；beginPath();描边线条的宽度线条末端形状线条相交样式开始绘制路径10、结束路径调用closePath();11、绘制圆弧12、绘制弧线并且以给定的半径closePath();创建路径后，如果想绘制一条连接到路径起点的线条，可以arc(x,y,radius,startAngle,endAngle,true/false);arcTo(x1,y1,x2,y2,radius)从上一点开始绘制一天弧线，至Vx2,y2为止,radius穿过x1,y1;13、moveTO(x,y);将绘图游标移动到(x,y)，不画线14、lineTo(x,y);从上一点开始绘制一条直线15、二次贝塞尔

3、曲线：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指定。这个方法绘制的是矩形路径，而不是独立形状。填充文本：fillText(hello”,x,y,width);width为可选的最大像素宽度，如果文本大于最则文本会收缩以适应最大宽度。

4、文本描边：strokeText(hello”,x,y,width);width为可选的最大像素宽度。文本样式：font=bold14pxArial;水平文本对齐：textAlign=start;/start,end,left,right,center。默认值：start。以文字的18、绘制文本：(1)大宽度，(2)(3)(4)起始点(x,y)为基点的纵轴进行对齐。(5) 垂直文本对齐:textBaseline=alphabetic;/top,hanging,middle,alphabetic,ideographic,bottom。默认值：alphabetico以文字的起始点(x,y)为基点的横

5、轴进行对齐。(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)

6、;translate(x,y):将坐标原点移动到x,y，执行这个变换之后，坐标0,0会变成之前由x,y表示的点。也可以使用transform(1,0,0,1,x,y);(3) transform(<number>,<number>,<number>,<number>,x,y);setTransform(<number>,<number>,<number>,<number>,x,y);将变换矩阵重置为默认状态，然后再调用transform();20、图形组合代码如下：context.fillStyle

7、=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运算，只显示新图形中与原有图形相重

8、叠的部分source-out：新图形与原有图形作out运算，只显示新图形中与原有图形不重叠的部分destination-out:新图形与原有图形作out运算，只显示新图形中与原有图形不重叠的部分source-atop：只绘制新图形中与原有图形重叠的部分和未被重叠的原有图形destination-atop:只绘制原有图形中被新图形重叠的部分和新图形的其他部分lighter:原有图形与新图形均绘制，重叠部分做加色处理xor：只绘制新图形与原有图形不重叠的部分，重叠部分变透明copy:只绘制新图形*/21、绘制图形阴影代码如下：context.shadowOffsetX=10;/阴影的横向位移量co

9、ntext.shadowOffsetY=10;/阴影的纵向位移量context.shadowColor=rgba(100,100,100,0.5);/阴影的颜色context.shadowBlur=7;/阴影的模糊范围22、绘制、平铺、裁剪图像代码如下：context.drawImage(image,x,y);context.drawImage(image,x,y,w,h);context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);sx,sy和sw,sh为源图像的被复制区域的起始坐标和高度，dx,dy和dw,dh为复制后的区域的目标坐标和高度。conte

10、xt.createPattern(image,type);图像平与甫，参数可以为：no-repeat,repeat-x,repeat-y,repeat;context.clip();/裁剪功能例子：代码如下：image=newImage();/创建Image对象image.src=./images/wukong.gif;vartest=context.createPattern(image,repeat-y);/createPattern设置平与甫效果，context.fillStyle=test;context.fillRect(0,0,400,400);image.onload=funct

11、ion()(/此方法的作用是，如果图片是比较大的网络图像文件，防止图像全部装载完毕才看见该图像，这样就可以一边装载一边绘制了。drawImg(context,image);functiondrawImg(context,image)(/绘制原始图像context.drawImage(image,10,10,125,125);局部放大context.drawImage(image,20,0,90,100,150,10,125,125);context.rect(20,20,80,80);context.clip();context.drawImage(image,0,0,200,200);23、

12、保存、恢复contex.save();将当前状态保存到栈中。注意：保存的只是对绘制图形的设置和变换，不会保存绘制图形的内容。context.restore();从栈中取出之前保存的图形状态可以应用的场合：(1) 图像或图形变形图像裁剪改变图形上下文时属性时fillStyle,font,globalAlpha,globalComposite-Operation,lineCap,lineJoin,lineWidth,miterLimit,shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,strokeStyle,textAlign,textBaseline24、线性渐变代码如下：varg=context.createLinearGradient(xStart,yStart,xEnd,yEnd