Canvas笔记

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支持的格式,也可以的到摄像头


发布了56 篇原创文章 · 获赞 8 · 访问量 8万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章