HTML5 Canvas Cheat Sheet 是一個收錄了比較簡單且常用的 HTML5 Canvas API 的網站。
使用 drag and drop API 將圖片拖曳到 fabric.js 的方法。
如果想要製作將網頁其中一個區塊截圖並儲存圖片的功能,可以參考使用這兩個 plugin,都很簡單使用。
fabric.js 是一個很方便且好用的 javascript canvas 函式庫,透過簡單的設定就可以用來做有趣的互動效果,諸如拖曳、旋轉和變形等等。
p5.js 是一個可以用來製作動畫及互動效果的 javascript 函式庫,又因為是以 canvas 為基礎,所以也可以完成一些很複雜的動態效果還不至於讓頁面感覺會頓頓的。
W3School 是一個非常老牌的網頁技術教學網站,在這邊可以學到各種網頁技術,舉凡 HTML、CSS、javascript、PHP、Python...等非常豐富,網站內也有語法教學與線上測試工具。
canvas 是 HTML5 新增的一種標籤,可以把它簡單想像成畫布,我們可以在畫布建立之後透過 javascript 在上面繪製我們想要的圖形出來。
使用 canvas 繪製文字時是利用 .fillText(textDraw, x, y) ,其中 textDraw 為文字的內容,x,y 則為座標位置,繪製前可以做一些文字的設定。
利用 drawImage() 的方式把圖片繪製到 canvas 上,完整參數為 drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)。