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