canvans基本操作

2016年06月08日 HTML, javascript 暂无评论 阅读 24 views 次
1、绘制矩形函数:
rect(x,y,width,height)
fillRect(x,y,width,height)
strokeRect(x,y,width,height)
2、线条属性:
lineWidth()
lineCap = "butt"(round,square);
lineJoin = miter(bevel,round);
miterLimit = 10;(一旦miter的像素超过一定的像素限制,会显示为bevel)3、图形转换:
context.translate(100,100);//原点位移
context.save();//保存图形状态
context.restore();//恢复图形状态

4、变换矩阵:
transform(a,b,c,d,e,f);ad 水平,垂直缩放,bc倾斜,ef平移
setTransform(a,b,c,d,e,f);恢复单元矩阵

5、填充样式:
fillStyle渐变色(线性)
var grd = context.createLinearGradient(xStart,ystart,xend,yend);
grd.addColorStop(stop,color);

6、径向渐变:
var grd = context.createRadialGradient(x0,y0,z0,x1,y1,z1);
grd.addColorStop(stop,color);

7、填充样式
createPattern
createPattern(img,repeat-style);
no-repeat:没有重复
repeat-x:横向填充
repeat-y:竖向填充
repeat:整个填充
createPattern(canvas,repeat-style);
createPattern(video,repeat-style);

给我留言

您必须 登录 才能发表留言!

Copyright © 大一网 保留所有权利.  

用户登录

分享到: