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萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章