【知識點】

【hsl顏色模式】h:色相  0-360，s:飽和度 0-100%，l:亮度 0-100%

【強制轉換int】a=parseInt(a)

【隨機數函式，生成[0，1）】Math.random()

【生成0-360的隨機數】a=parseInt(Math.random()*361)

【定義結構體】var rect={x:0,y:0};

【開啟新路徑】ctx.beginPath();

【繪製矩形路徑】ctx.rect(起點x,起點y,寬度,高度)

【矩形路徑的填充】ctx.stroke(),ctx.fill()

【設定路徑顏色】ctx.fillstyle="",ctx.strokestyle=""

【儲存當前繪圖環境】ctx.save();

【還原繪圖環境】ctx.restore();

【閉合新路徑】ctx.closePath();

【清屏】ctx.clearrect(x,y,w,h)

【事件註冊】canvas.onclick=事件出發函式；

【事件觸發函式】function onCanvasClick(event)

【在控制檯輸出】console.log(變數)

【設定hsl】style.color="hsl("+h+","+s+"%,"+l+"%)"

【context】繪圖環境/繪圖表面