html5 堂,第八堂 – Fun with HTML5 Canvas

邏輯流程

設定參數，預設的畫布長、畫布寬、筆色、筆尖…。

設定監聽，mousemove、mousedown、mouseup、mouseout，。

寫mousedown要執行的函式，讓函式能夠以預設顏色、粗細作畫。

加入改變顏色及粗細變數。

課程重點

：提供在頁面上畫圖的容器。

getContext()：事實上canvas只是提供作畫環境，而作畫這件事主要是Context來執行。因此我們要先有一個Context，const ctx = canvas.getContext(“2d”);。可以看到裡面有個2D參數，所以想必Context也能夠畫3D，但這次就先以2D來介紹。

Context參數：這次實作會用到幾個基本的Context設定

ctx.strokeStyle = ’#BADA55′;

ctx.lineJoin = ’round’;

ctx.lineCap = ’round’;

分別是畫筆顏色、線條間連結樣式(尖角或圓角)、畫尖樣式(方正頭或圓頭)。

Context作畫：實作作畫的部分是寫在mousedown要執行的函式中，

ctx.beginPath();

ctx.moveTo(lastX, lastY);

ctx.lineTo(e.offsetX, e.offsetY);

ctx.stroke();

上面這幾行code基本上是共存的，缺一不可。beginPath()是個啟動作畫的函式，moveTo()和lineTo()可以想成是線段的起點和終點，最後stroke()是把線段畫上去。

延伸閱讀

Destructuring Assignment：在實作中老師用這個方法來賦予變數值，如

[lastX, lastY] = [e.offsetX, e.offsetY];，可同時賦予多個變數值。

HSL：實作中所用的色彩標示是採用HSL。HSL就是Hue(色相)、Saturation(飽和度)、Lightness(明亮度)。在這裡用HSL有個好處，就是做顏色變化只需要調整H值，而且H值的範圍是0~360，也是從紅→橙→黃→綠→藍→靛→紫→紅，開始結束都是紅色，因此可以很容易做顏色變化的循環。