標籤: canvas 頁1

網路資源

fabric.js- 強大且方便使用的 javacript canvas 函式庫

fabric.js 是一個很方便且好用的 javascript canvas 函式庫,透過簡單的設定就可以用來做有趣的互動效果,諸如拖曳、旋轉和變形等等。

網路資源

Konva.js- 威力強大的 canvas 繪圖函式庫

Konva.js 是一個威力強大的 canvas 繪圖函式庫,主要功能是讓你創建 Canvas 上的繪圖版、圖層、拖拉工具等。

網路資源

p5.js- 以 canvas 為本的 javascript 動畫函式庫

p5.js 是一個可以用來製作動畫及互動效果的 javascript 函式庫,又因為是以 canvas 為基礎,所以也可以完成一些很複雜的動態效果還不至於讓頁面感覺會頓頓的。

網路資源

W3Schools- 非常老牌且豐富的網頁教學網站

W3School 是一個非常老牌的網頁技術教學網站,在這邊可以學到各種網頁技術,舉凡 HTML、CSS、javascript、PHP、Python...等非常豐富,網站內也有語法教學與線上測試工具。

教學

用 javascript 把 video 變成圖片

如果要把頁面給印出來,可能會遇到 video 沒辦法看的情況,這邊我使用 js 先把 video 轉成圖片後,應該就可以避免這個情況。

教學

HTML5 Canvas 基礎(七) 生成圖片- toDataURL

要把 canvas 的內容轉成圖片,只要透過 toDataURL 就可以了,toDataURL可以再設定圖片的格式和品質。

教學

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)。

教學

HTML5 Canvas 基礎(四) 畫直線與弧線

透過 lineTo 和 arc 在 canvas 繪製直線與弧線。

教學

HTML5 Canvas 基礎(三) 陰影

利用 shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor 設定陰影後繪製至 canvas 上。

教學

HTML5 Canvas 基礎(二) 漸層填色

透過 createLinearGradient() 和 createRadialGradient() 在 canvas 上繪製漸層瑱色。