08 - Fun with HTML5 Canvas

展示 (opens new window)

內容概要

將畫布展開至全屏

滑鼠點下去時模擬拿筆畫圖的感覺

重點整理

• 滑鼠事件和細節
• 畫布顏色和尺寸控制

滑鼠事件和細節

此篇需要注意的滑鼠事件有四個

• mousemove
• mousedown
• mouseup
• mouseout

其中mousemove事件會一直觸發

必須要在mousedown時才開始畫

同時設定初始位置的xy座標

canvas.addEventListener('mousedown', (e) => {
  isDraw = true
  lastX = e.offsetX
  lastY = e.offsetY
})

mousemove時才能有線段畫圖

而其他兩個事件則結束畫畫

TIP

mouseout是當滑鼠移出畫布時觸發

畫布顏色和尺寸控制

畫布的顏色用hsl(${數字}, 100%, 50%)

每觸發一次drawing()數字就往上加

超過360就重置回0循環~

尺寸直接判斷ctx.lineWidth

用direction變數控制數字遞增或遞減

超過寬度超過100或小於5則

direction = !direction

然後根據目前的布林值遞增或遞減