標籤: Canvas 頁1

教學

用 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 上繪製漸層瑱色。