如何实现基于Canvas的JavaScript白板启停？解决移动即绘制问题

你可以通过添加状态变量跟踪鼠标按下状态，并结合mousedown、mouseup、mouseleave事件实现需求，修改后的代码如下：

let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')
// 新增状态变量：标记是否处于绘制状态
let isDrawing = false

ctx.fillStyle = 'black'
ctx.fillRect(0, 0, canvas.width, canvas.height)

function draw(canvas, event) {
  let rect = canvas.getBoundingClientRect()
  let x = event.clientX - rect.left
  let y = event.clientY - rect.top

  ctx.fillStyle = 'white'
  ctx.fillRect(x, y, 5, 5)
}

// 鼠标按下时开启绘制状态，同时绘制当前点
canvas.onmousedown = (e) => {
  isDrawing = true
  draw(canvas, e)
}

// 鼠标松开或移出画布时关闭绘制状态
canvas.onmouseup = () => {
  isDrawing = false
}

canvas.onmouseleave = () => {
  isDrawing = false
}

// 仅在绘制状态开启时执行绘制
canvas.onmousemove = (e) => {
  if (isDrawing) {
    draw(canvas, e)
  }
}

关键改动说明： #

• 状态变量isDrawing：用于记录当前是否允许绘制，初始为false，鼠标按下时设为true，松开/移出画布时设为false
• mousedown事件处理：不仅开启绘制状态，还调用一次draw函数，确保按下鼠标的瞬间就能画出第一个点
• mouseleave事件处理：覆盖鼠标移出画布后松开的场景，避免回到画布时仍处于绘制状态
• mousemove事件逻辑调整：增加状态判断，仅当isDrawing为true时才执行绘制操作

内容的提问来源于stack exchange，提问作者Big Floppa