Fun with HTML5 Canvas

 邏輯流程
設定<canvas>參數，預設的畫布長、畫布寬、筆色、筆尖…。
設定監聽，mousemove、mousedown、mouseup、mouseout，。
寫mousedown要執行的函式，讓函式能夠以預設顏色、粗細作畫。
加入改變顏色及粗細變數。
課程重點
<canvas>：提供在頁面上畫圖的容器。
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，也是從紅→橙→黃→綠→藍→靛→紫→紅，開始結束都是紅色，因此可以很容易做顏色變化的循環。