目標

利用 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 分開變數
增加 hue 與 direction 變數
利用 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 的畫布內容，必須指定內容類型，有 2d 、 webgl 、 webgl2 、 bitmaprenderer 幾種。

CanvasRenderingContext2D.strokeStyle

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

就是畫筆顏色。

CanvasRenderingContext2D.lineJoin

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

線條與線條的連接樣式。

CanvasRenderingContext2D.lineCap

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

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

CanvasRenderingContext2D.lineWidth

CanvasRenderingContext2D.lineWidth 為 Canvas 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 中新增了 HSL 及 HSLA 等兩種跟顏色有關的屬性。
其中 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%)

ShunNien's Blog

JS30紀錄 08-Fun With HTML5 Canvas

目標