所以我关注本教程,我会遇到一个奇怪的错误。
let isDrawing = false
let lastX = 0
let lastY = 0
const draw = function(ev){
console.log('isDrawing', isDrawing)
if(!isDrawing){
return
}
ctx.beginPath()
ctx.moveTo(lastX, lastY)
ctx.lineTo(ev.offsetX, ev.offsetY)
ctx.stroke()
//[TODO] destruction doesn't work????
[lastX, lastY] = [ev.offsetX, ev.offsetY]
// lastX = ev.offsetX
// lastY = ev.offsetY
}
canvas.addEventListener('mousemove', draw)
canvas.addEventListener('mousedown', (ev) => {
isDrawing = true
[lastX, lastY] = [ev.offsetX, ev.offsetY]
})
canvas.addEventListener('mouseup', () => isDrawing = false)
canvas.addEventListener('mouseout', () => isDrawing = false)
在绘制函数的末尾,如果我使用破坏语法,我会发现一个错误:
script.js:26未定义的typeerror:无法设置属性'0' 在htmlcanvaselement.draw
奇怪的是,当我在Mousedown事件侦听器中使用相同的符号时,它毫无问题。
我在做什么错?
您没有使用半olon,并且通过使用开放式括号开始线路就陷入了ASI陷阱。被解析为
ctx.stroke()[(lastX, lastY)] = [ev.offsetX, ev.offsetY]