Day8: Fun with HTML5 Canvas

//取得 #draw 元素。
const canvas = document.querySelector('#draw')
//getContext 取得context 來繪畫， 2d 代表二維繪圖
const ctx = canvas.getContext('2d')

//將原本高寬800的canvas設定為window寬高
canvas.width = window.innerWidth
canvas.height = window.innerHeight

//設定樣式
ctx.strokeStyle = '#BADA55' //筆觸顏色
ctx.lineJoin = 'round' //線條連接樣式
ctx.lineCap = 'round' //線條結束樣式
ctx.lineWidth = 100 //線條寬度

//設定參數
let isDrawing = false //判斷是否執行畫圖中
let lastX = 0 //繪畫位置
let lastY = 0
let hue = 0 //顏色，在hsl中使用
let direction = true //判斷粗細增減用

function draw(e) {
  if (!isDrawing) return //如果沒有執行畫圖就停止
  ctx.strokeStyle = `hsl(${hue}, 100%, 50%)` //顏色
  ctx.beginPath() //初始化一條路徑。
  // start from
  ctx.moveTo(lastX, lastY) //初始位置
  // go to
  ctx.lineTo(e.offsetX, e.offsetY) //連接路徑終點到指定的座標中
  ctx.stroke() //繪製路徑
  ;[lastX, lastY] = [e.offsetX, e.offsetY] //把結束點放回 X 和 Y 變數

  hue++
  if (hue >= 360) {
    //當色碼超過360後歸零
    hue = 0
  }
  //如果筆觸粗細大於等於 50 或 小於等於 1 就反轉
  if (ctx.lineWidth >= 50 || ctx.lineWidth <= 1) {
    direction = !direction
  }

  //// 增加或減少筆觸粗細
  if (direction) {
    ctx.lineWidth++
  } else {
    ctx.lineWidth--
  }
}

//mousedown 按下滑鼠按鍵畫的時候，isDrawing = true, 把目前滑鼠的位置設定為變數中的X、Y
canvas.addEventListener('mousedown', (e) => {
  isDrawing = true
  ;[lastX, lastY] = [e.offsetX, e.offsetY]
})

//滑鼠移動中
canvas.addEventListener('mousemove', draw)
//放開滑鼠按鍵時
canvas.addEventListener('mouseup', () => (isDrawing = false))
//滑鼠移開
canvas.addEventListener('mouseout', () => (isDrawing = false))