Theme NexT works best with JavaScript enabled

ShunNien's Blog

不積跬步,無以致千里;不積小流,無以成江海。

0%

JS30紀錄 08-Fun With HTML5 Canvas

目標

target
利用 Canvas 製作一個滿版的畫布,並讓畫筆隨著移動變動粗細與顏色。

Demo | Github

處理步驟

步驟 1.

取得 canvas DOM ,並將該 DOM 設定為 window 的大小,與畫筆的初始樣式設定。

  • 取得 canvas 的 context
  • 設定 strokeStyle 畫筆顏色
  • 設定線條連結樣式 lineJoin
  • 設定線條兩端端點樣式 lineCap
  • 設定線條寬度 lineWidth

步驟 2.

  • 設定滑鼠 mousedown 時,取得目前滑鼠位置為繪製起始點
  • 設定滑鼠 mousemove 時,設定繪製路徑
  • 設定滑鼠 mouseup 時,才開始繪製

步驟 3.

修正上一步驟的繪製過程,讓線條在滑鼠移動時也跟著繪製,因此建立 isDrawing flag 標註現在是否繪製,另外建立標註現在起始點的變數。

  • 添加 isDrawing 變數,標註現在是否繪製
  • 添加 startPoint 變數,設定起始

步驟 4.

增加畫筆變色與樣式變換

  • 修正 startPoint 變數為 X,Y 分開變數
  • 增加 huedirection 變數
  • 利用 hue 變換畫筆顏色
  • 利用 direction 變化畫筆粗細
  • 增加 mouseout 事件,當滑鼠移出畫布時,此次作畫結束

筆記與備註事項

JavaScript 部分

Canvas 教學文件

Canvas 有許多地方可以深入探討,因應此篇課題,就不多談,不過 MDN 提供了不錯的教學文件,因此這邊特地列上來。

<canvas> 是一個 HTML 元素,我們可以利用程式腳本在這個元素上繪圖(通常是用 JavaScript)。除了繪圖,我們還可以合成圖片或做一些簡單(或是不那麼簡單)的動畫。
資料來源 - MDN

Canvas API

<canvas> 是 HTML5 的新元素,可透過 Script(通常是 JavaScript)繪製圖形。例如,可以用來繪圖、合成圖照片、建立動畫、甚至處理即時的影片播放。
資料來源 - MDN

CanvasRenderingContext2D.beginPath()

Canvas 2D API 通過清空子路徑列表開始一個新路徑的方法。當你想創建一個新的路徑時,調用此方法。
資料來源 - MDN

畫線段時,使用此方法,表示以下開始繪製新的線段。

OffscreenCanvas.getContext()

取得 canvas 的畫布內容,必須指定內容類型,有 2dwebglwebgl2bitmaprenderer 幾種。

CanvasRenderingContext2D.strokeStyle

CanvasRenderingContext2D.strokeStyleCanvas 2D API 描述畫筆(繪製圖形)顏色或者樣式的屬性。默認值是 #000(black)。
資料來源 - MDN

就是畫筆顏色。

CanvasRenderingContext2D.lineJoin

CanvasRenderingContext2D.lineJoinCanvas 2D API 用來設置 2 個長度不為 0 的相連部分(線段,圓弧,曲線)如何連接在一起的屬性(長度為 0 的變形部分,其指定的末端和控制點在同一位置,會被忽略)。
lineJoin sample
資料來源 - MDN

線條與線條的連接樣式。

CanvasRenderingContext2D.lineCap

CanvasRenderingContext2D.lineCapCanvas 2D API 指定如何繪製每一條線段末端的屬性。有 3 個可能的值,分別是:butt, roundsquare。默認值是 butt
資料來源 - MDN

簡而言之,就是設定線條兩端端點的樣式。

CanvasRenderingContext2D.lineWidth

CanvasRenderingContext2D.lineWidthCanvas 2D API 設定線段粗細的屬性。可藉此屬性取得目前的線段粗細值(預設為 1.0)。設定此屬性時,負數Infinity 以及 NaN 都會被忽略,而其他正確的值將會被設定成屬性值。
資料來源 - MDN

CanvasRenderingContext2D.moveTo()

繪製路徑的設定,由畫筆落點移動到 (x,y) 座標。可以用來設定起始點之類。

CanvasRenderingContext2D.lineTo()

CanvasRenderingContext2D.lineTo() 是Canvas 2D API 使用直線連接子路徑的終點到x,y坐標的方法(並不會真正地繪製)。
資料來源 - MDN

CanvasRenderingContext2D.stroke()

CanvasRenderingContext2D.stroke() 是Canvas 2D API 使用非零環繞規則,根據當前的畫線樣式,繪製當前或已經存在的路徑的方法。
資料來源 - MDN

就是開始繪製,將設定的路徑繪製出來。

CSS 部分

hsl()

CSS3 中新增了 HSLHSLA 等兩種跟顏色有關的屬性。
其中 H 為 hue(色相)、S 為 saturation(飽合度)、L 為 lightness(亮度)。HSLA 就跟 RGBA 一樣,都是在原本的屬性中多加入了不透明度的設定而已。

hue

  • hue 為整數的角度值,基本上是從 0 到 360 之間,因為它是經過一個簡單的計算來處理所輸入的值
  • 0 或 360 表示紅色;60 表示黃色;120 表示綠色;240 表示藍色。

saturation

saturation 的表示方式為百分比(%);100% 就是最大飽合度,而 0% 則為灰色調。

lightness

lightness 的表示方式也一樣是百分比(%);以 50% 為正常亮度為分界,百分比越高則會越接近白色(100%),而百分比越低則會越接近黑色(0%)

參考資料

歡迎關注我的其它發布渠道