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