24个canvas基础知识小结

现把canvas的知识点总结如下，以便随时查阅。
+ X  G% }! H1 O" D  _1、填充矩形 fillrect(x,y,width,height);
2、绘制矩形边框 strokerect(x,y,width,height);
, m: B! e( A) C  i( I! x  t3、擦除矩形 clearrect(x,y,width,height);
2 o- r8 ?. R% T4、填充样式 fillstyle=red; 样式可以为颜色、渐变和图像。
5、描边样式 strokestyle=red;
  @' l9 r; `, p) u- z/ K4 y# m6、描边线条的宽度 linewidth=4;
7、线条末端形状 linecap=butt; butt(对接)/round(圆)/square(方)，默认情况下是butt;
8、线条相交样式 linejoin=miter; miter(尖角)/round(圆角)/bevel(斜角),默认尖角;
) \: O2 H2 h+ [! H2 }9、开始绘制路径 beginpath();
10、结束路径 closepath(); 创建路径后，如果想绘制一条连接到路径起点的线条，可以调用closepath();
# t4 \# b2 I0 ^0 Q' ]  W11、绘制圆弧 arc(x,y,radius,startangle,endangle,true/false);
$ e: o7 z: Y. m  i8 Z; H12、绘制弧线 arcto(x1,y1,x2,y2,radius) 从上一点开始绘制一天弧线，到x2,y2为止，并且以给定的半径radius穿过x1,y1;
( `# W4 l3 L8 M& ~5 w9 e13、moveto(x,y); 将绘图游标移动到（x,y）,不画线
14、lineto(x,y); 从上一点开始绘制一条直线
6 P' u0 U% y6 t7 B15、二次贝塞尔曲线： 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指定。这个方法绘制的是矩形路径，而不是独立形状。
) A$ U8 n8 ~5 }4 v18、绘制文本：
4 @  F( ]! A. H4 f# t(1) 填充文本：filltext(hello,x,y,width);width为可选的最大像素宽度,如果文本大于最大宽度，则文本会收缩以适应最大宽度。
(2) 文本描边：stroketext(hello,x,y,width);width为可选的最大像素宽度。
  F% Y" z: I0 u* Y(3) 文本样式：font=bold 14px arial;
  l; v. d0 V7 A3 V' c(4) 水平文本对齐：textalign='start'; // start, end, left,right, center。默认值:start。以文字的起始点(x,y)为基点的纵轴进行对齐。
) Y1 ^3 F7 G7 g(5) 垂直文本对齐：textbaseline='alphabetic'; //top, hanging, middle,alphabetic, ideographic, bottom。默认值：alphabetic。以文字的起始点(x,y)为基点的横轴进行对齐。
! e3 x# v! @. s3 g# E# c4 e, }# r(6) 文本的宽度：var text=hello; var length=context.measuretext(text)；参数text为所需要绘制的文字
19、变换
(1) rotate(angle):围绕原点旋转图像angle弧度。
7 L; y4 L6 C  R2 C. P也可以使用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);
" w2 G: w4 T3 e4 T/ g2 Q(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);
: V; w- t8 F3 a: a" w2 w! y4 [. H4 w(5) settransform(<number>, <number>, <number>,<number>,x, y);将变换矩阵重置为默认状态，然后再调用transform();
20、图形组合
代码如下:
context.fillstyle=blue;
8 \' [6 x2 s( Y  a) N- ucontext.fillrect(10,10,100,100);
context.globalcompositeoperation='lighter'; 可选值如/* */内。
0 |8 t3 N" k7 ?8 ^* |3 C; ?context.fillstyle=red;
% l1 R' {. v5 F) t9 acontext.arc(110,60,50,0,math.pi*2,false);
context.fill();
! o( B# f. e8 L) C9 E. A/*
source-over(默认值)：
destination-over：在原有图形之下绘制新图形
source-in：新图形与原有图形作in运算，只显示新图形中与原有图形相重叠的部分
destination-in：原有图形与新图形作in运算，只显示新图形中与原有图形相重叠的部分
" n$ s: x; w+ m+ ysource-out：新图形与原有图形作out运算，只显示新图形中与原有图形不重叠的部分
( r* \  F% S/ C+ Bdestination-out：新图形与原有图形作out运算，只显示新图形中与原有图形不重叠的部分
source-atop：只绘制新图形中与原有图形重叠的部分和未被重叠的原有图形
destination-atop：只绘制原有图形中被新图形重叠的部分和新图形的其他部分
/ Y, c) ~$ I" S- }: w1 T2 a$ Olighter：原有图形与新图形均绘制，重叠部分做加色处理
xor：只绘制新图形与原有图形不重叠的部分，重叠部分变透明
copy：只绘制新图形
& I# y3 P5 O# I9 U) L$ y! f*/
$ l0 \/ y- ]; N, A9 x1 b# H21、绘制图形阴影
代码如下:
context.shadowoffsetx=10; //阴影的横向位移量
context.shadowoffsety=10; //阴影的纵向位移量
" A7 b1 D3 f* [3 acontext.shadowcolor='rgba(100,100,100,0.5)'; //阴影的颜色
context.shadowblur=7; //阴影的模糊范围
8 o# t9 w! @4 K6 y4 s& b22、绘制、平铺、裁剪图像
5 V2 t) U6 p: O( r4 D/ J: T代码如下:
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;
8 {3 {8 D  M& \/ u5 zcontext.clip(); //裁剪功能
& p1 ^) I* M2 t% Z+ B. m$ ?8 {4 S# o例子：
代码如下:
image=new image(); //创建image对象
  n# |3 M8 L+ s: v+ `9 @image.src=../images/wukong.gif;
var test=context.createpattern(image,'repeat-y');//createpattern设置平铺效果，
context.fillstyle=test;
; C: S1 @) l) x' }2 x  N# Vcontext.fillrect(0,0,400,400);
image.onload=function() { //此方法的作用是，如果图片是比较大的网络图像文件，防止图像全部装载完毕才看见该图像，这样就可以一边装载一边绘制了。
8 O4 x. z' q& y# V7 Wdrawimg(context,image);
}
" f+ A7 K- L0 V3 D; A7 B3 }function drawimg(context,image){
( `" g) _: E5 [% N//绘制原始图像
4 r" e! C' O  I/ @context.drawimage(image,10,10,125,125);
//局部放大
4 r& v9 R% j: P; gcontext.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);
( l' A1 J) i$ ~- I& J1 o}
) }: x5 Q; {5 y0 U  `) x! A23、保存、恢复
4 R8 ]$ g( U6 ?; b  Rcontex.save();将当前状态保存到栈中。注意：保存的只是对绘制图形的设置和变换，不会保存绘制图形的内容。
9 Y2 h! x- [5 Z  K8 C' L- I* {+ Gcontext.restore();从栈中取出之前保存的图形状态
  N! S2 |1 R0 R" t% e6 f3 F, b可以应用的场合：
(1)图像或图形变形
(2)图像裁剪
(3)改变图形上下文时属性时：fillstyle,font,globalalpha,globalcomposite-operation,linecap,linejoin,linewidth,miterlimit,shadowblur,shadowcolor,
7 a0 T2 r1 [( J, V% eshadowoffsetx,shadowoffsety,strokestyle,textalign,textbaseline
24、线性渐变
+ O8 r' \' ]! B代码如下:
2 M4 W& w4 s2 a6 d9 [+ N/ wvar g=context.createlineargradient(xstart,ystart,xend,yend);
1 j) D) F" V" E0 O; Rvar g1=context.createradialgradient(xstart,ystrat,radiusstrat,xend,yend,radiusend);
# d3 A# G' i8 k/ q& {5 Gg.addcolorstop(0,'red');
g.addcolorstop(0,'green');
; p: [! u! S5 Y* d" u1 Z. h8 y" mcontext.fillstyle=g;
0 R; R) I! C6 {' w$ {* l2 U% [context.fillrect(0,0,200,200);
8 V9 s2 H+ U! Y. B9 N
8 E/ K4 v8 H7 i% B$ R更多网页制作信息请查看： 网页制作

唉!猪!你怎么了?

我的我的 忘记了 呵呵

对自己好点~别难为自己

什么什么啊??

@,@..是什么意思呀？

下次有人骂我了...我给他还回去..

要相信自己~智商为0

哎 天理何在啊??

小手一抖，经验到手！手拿酱油，低头猛走！酱油党路过，杜绝零回复