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、结束路径 clopath(); 创建路径后，如果想绘制一条连接到路径起点的线条，可以调用clopath();

11、绘制圆弧 arc(x,y,radius,startangle,endangle,true/fal);

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) 垂直文本对齐：textbaline=’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) ttransform(<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,fal);

context.fill();

/*

source-over(默认值)：

destination-over：在原有图形之下绘制新图形

source-in：新图形与原有图形作in运算，只显示新图形中与原有图形相重叠的部分

destination-in：原有图形与新图形作i什么牌子的化妆品好用n运算，只显示新图形中与原有图形相重叠的部分

source-out：新图形与原有图形作out运算，只显示新图形中与原有图形不重叠的部分

destination-out：新图形与原有图形作out运算，只显示新图形中与原有图形不重叠的部分

source-atop：只绘制新图形中与原有图形重叠的部分和未被重叠的原有图形

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

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

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

copy：只绘制新图形

*/

21、绘制图形阴影

复制代码 代码如下:

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

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

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,2美的同义词0,8金化炮战0,80);

context.clip();

context.drawimage(image,0,0,200,200);

}

23、保存、恢复

contex.save();将当前状态保存到栈中。注意：保存的只是对绘制图形的设置和变换，不会保存绘制图形的内容。
context.restore();从栈中取出之前保存的图形状态
可最知女人心以应用的场合：
(1)图像或图形变形
(2)图像裁剪
(3)改变图形上下文时属性时：fillstyle,font,globalalpha,globalcomposite-operation,linecap,linejoin,linewidth,miterlimit,shadowblur,shadowcolor,爱情心理测试题
shadowofftx,shadowoffty,strokestyle,textalign,textbaline

24、线性渐变

复制代码 代码如下:

var g=context.createlineargradient(xstart,ystart,xend,yend);

var g1=context.createradialgradient(xstart,ystrat,radiusstrat,xend,yend,radiund);

g.addcolorstop(0,’red’);

g.addcolorstop(0,’green’);

context.fillstyle=g;

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