Canvas笔记

来源：互联网发布：小智外设店淘宝编辑：程序博客网时间：2024/04/29 07:55

LineTo：指定一个开始坐标，结束坐标，实现连起来

MoveTo：将笔抬起来，再到指定坐标

context.fillRect(x,y,w,h)：填充矩形

context.strokeRect(x,y,w,h)：镂空的矩形

context.clearRect(x,y,w,h)：擦除矩形

context.clearRect(x,y,imageObj,w,h)：清空对象的内容

context.clear()：直接清空画布

canvas.toDataURL函数，将绘制出来的图片转换成长串文本

Scale方法进行等比例拉伸

canvas可以进行图形叠加

十二种叠加方式：

默认：source-over A over B

source-in A in B

source-out A out B

source-atop A atop B

destination-over B over A

destination-in B in A

destination-atop B atop A

lighter A plus B

copy A(B is ignored)

xor A xor B

vendorName-*

颜色填充：

线性渐变填充一直渐变下去

linGrad.addColorStop(0.0,’white’)

linGrad.addColorStop(0.3,’purple’)

linGrad.addColorStop(0.5,’orange’)

linGrad.addColorStop(1.0,’black’)

中心区域渐变，指定原点，指定半径

radGrad.addColorStop(0.0,’yellow’)

radGrad.addColorStop(1.0,’white’)

阴影

context.shadowOffSetX=10

context.shadowOffSetY=10

context.shadowBlur=7.5模糊程度

绘制文字

Canvas对于绘制文字提供了两种方法fillText(填充模式)或strokeText(边框模式)。

void fillText(String, x, y, [maxWidth]);

void strokeText(String, x, y, [maxWidth]);

操作图像

创建Image对象

drawImage方法进行绘制图像

8个参数

目标坐标 x,y,w,h

大图的坐标 x,y,w,h

getUserMedia函数可以得到浏览器对video支持的格式，也可以的到摄像头

0 0