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