今天可以再來玩一些Canvas的功能

1.更改畫筆的顏色，讓畫筆畫出彩虹的顏色
這邊是使用HSL色彩概念，
HSL即色相、飽和度、亮度(hue,Saturation,Lightness)
hue色相---
紅色為0度（360度）；黃色為60度；綠色為120度；
青色為180度；藍色為240度；品紅色為300度。
也就是hue在每360度就會有一次循環。
所以可以設定一個變數

let hue = 0;

在draw函式將hue++，並在達到360時歸零，重新計算

function draw(e) {
    ...
    lastY = e.offsetY;
    hue++;
    if (hue > 360) {
      hue = 0;
    }
}

這樣畫筆的顏色就會持續不斷的替換。

2.動態更改畫筆的粗細度

ctx.lineWidth = "1"; // 畫筆的粗細

如果只是在draw函式，將ctx.lineWidth++，這樣畫筆粗度會無限加大，
我希望是加粗到一個程度，會再慢慢變細。
所以可以設定一個變數來確認現在是要讓畫筆粗細，
向上增加還是向下遞減

let direction = true;

在畫筆粗細大於 >=100 或者 畫筆粗細 <= 1 時
direction變數會轉換成false，
同時也帶動畫筆粗細要遞增或遞減，
這樣就能夠控制畫筆粗細介於 1~100之間

function draw(e) {
    ...
    if (hue > 360) {
      hue = 0;
    }
    if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
      direction = !direction;
    }
    if (direction) {
      ctx.lineWidth++;
    } else {
      ctx.lineWidth--;
    }
}

今天的練習完成囉，完整的程式碼請直接點擊下方codePen連結
codePen
或者也可以直接到WES BOS的網站下載打包好的檔案
javascript30