JavaScript clearRect函数失效：Canvas清除按钮无响应问题求助

问题根源 #

你自定义的clear函数和浏览器全局环境中的内置clear()函数重名，点击按钮时实际调用的是浏览器内置函数，而非你写的清除画布逻辑，所以按钮没有任何反应。

修复步骤 #

1. 修改函数名：将自定义的clear函数重命名为不会和内置函数冲突的名称，比如clearCanvas
2. 更新按钮事件：把按钮的onclick属性值改成新的函数名clearCanvas()

修改后的完整代码 #

JavaScript代码

const canvas = document.getElementById("myCanvas")
const ctx = canvas.getContext('2d')
canvas.style.border = "1px solid black"

canvas.onmousedown = function(event) {
  ctx.beginPath();
  // 用offsetX/offsetY获取相对于Canvas的坐标，比event.x更准确
  let x = event.offsetX
  let y = event.offsetY
  ctx.fillStyle = "red"
  ctx.fillRect(x - 10, y - 10, 20, 20) // 调整偏移量，让正方形以点击位置为中心
  ctx.closePath();
  console.log("click")
}

function clearCanvas() {
  console.log("clear")
  ctx.clearRect(0, 0, canvas.width, canvas.height)
}

HTML代码

<canvas id="myCanvas" width="500" height="500"></canvas><br>
<button type="button" onclick="clearCanvas()">Clear Canvas</button>

额外优化说明 #

之前用event.x和event.y获取的是相对于整个页面的坐标，换成event.offsetX和event.offsetY可以直接得到相对于Canvas元素的坐标，这样绘制的正方形位置会更准确，不用再手动调整偏移量（比如之前的x-28.5）。

内容的提问来源于Stack Exchange，提问作者Hollow101