好程序员分享24个canvas基础知识小结

　　好程序员分享24个canvas基础知识小结，很是全面详尽，推荐给你们。

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

　　一、填充矩形 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(斜角),默认尖角;

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

　　十、结束路径 closePath(); 建立路径后，若是想绘制一条链接到路径起点的线条，能够调用closePath();

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

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

　　1三、moveTO(x,y); 将绘图游标移动到(x,y),不画线

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

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

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

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

　　1八、绘制文本：

　　(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为所须要绘制的文字

　　1九、变换

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

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

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

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

　　(5) setTransform(, , ,,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：只绘制新图形中与原有图形重叠的部分和未被重叠的原有图形

　　destination-atop：只绘制原有图形中被新图形重叠的部分和新图形的其余部分

　　lighter：原有图形与新图形均绘制，重叠部分作加色处理

　　xor：只绘制新图形与原有图形不重叠的部分，重叠部分变透明

　　copy：只绘制新图形

　　*/

　　2一、绘制图形阴影

　　代码以下:

　　context.shadowOffsetX=10; //阴影的横向位移量

　　context.shadowOffsetY=10; //阴影的纵向位移量

　　context.shadowColor='rgba(100,100,100,0.5)'; //阴影的颜色

　　context.shadowBlur=7; //阴影的模糊范围

　　2二、绘制、平铺、裁剪图像

　　代码以下:

　　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为复制后的区域的目标坐标和高度。

　　context.createPattern(image,type);图像平铺，参数能够为：no-repeat,repeat-x,repeat-y,repeat;

　　context.clip(); //裁剪功能

　　例子：

　　代码以下:

　　image=new Image(); //建立Image对象

　　image.src="../images/wukong.gif";

　　var test=context.createPattern(image,'repeat-y');//createPattern设置平铺效果，

　　context.fillStyle=test;

　　context.fillRect(0,0,400,400);

　　image.onload=function() { //此方法的做用是，若是图片是比较大的网络图像文件，防止图像所有装载完毕才看见该图像，这样就能够一边装载一边绘制了。

　　drawImg(context,image);

　　}

　　function drawImg(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);

　　}

　　2三、保存、恢复

　　contex.save();将当前状态保存到栈中。注意：保存的只是对绘制图形的设置和变换，不会保存绘制图形的内容。

　　context.restore();从栈中取出以前保存的图形状态

　　能够应用的场合：

　　(1)图像或图形变形

　　(2)图像裁剪

　　2四、线性渐变

　　代码以下:

　　var g=context.createLinearGradient(xStart,yStart,xEnd,yEnd);

　　var g1=context.createRadialGradient(xStart,yStrat,radiusStrat,xEnd,yEnd,radiusEnd);

　　g.addColorStop(0,'red');

　　g.addColorStop(0,'green');

　　context.fillStyle=g;

　　context.fillRect(0,0,200,200);