標籤: 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 後編輯

使用 drag and drop API 將圖片拖曳到 fabric.js 的方法。

教學

透過 fabric.js 建置圖片編輯的 canvas

之前提到可以使用 fabric.js 來製作一些有趣的互動效果,這邊就來說一下該如何設置以及基本使用。

教學

製作隨網頁容器大小改變的 canvas 區塊

如果在網頁上有用到 canvas,又希望這個區塊可以隨著頁面大小做 RWD 變化的換,可以搭配使用 CSS 的 object-fit 屬性。

網路資源

使用 html2canvas 簡單且快速的將網頁轉為 canvas 後並透過 canvas2image 下載圖片

如果想要製作將網頁其中一個區塊截圖並儲存圖片的功能,可以參考使用這兩個 plugin,都很簡單使用。

教學

使用 Vue.js 透過 Canvas 製作浮水印效果

說明使用 vue.js 搭配 canvas 製作浮水印的方法。

教學

在 Vue.js 裡面繪製 canavs

說明在 vue.js 內使用 canvas 繪製的初步做法。

網路資源

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