如何修复clearRect？

Question

作为介绍，我是 JS 的初学者，所以也许以下问题的答案很简单，但我只是没有看到。我有以下代码：let canvas = document.getElementById('canvas')let ctx = canvas.getContext('2d');canvas.width = window.innerWidthcanvas.height = window.innerHeightlet img = new Image();img.onload = function() { ctx.drawImage(img, 0, 0); };img.src = './tree.jpg';哪个有效，所以这里没问题。然后我有：ctx.clearRect(0, 0, 300, 300);img.src = './tree.jpg';ctx.drawImage(img, 730, 720);出于某种我无法理解的原因， clearRect 不想按该顺序工作。

Answer 1

clearRect() 在这里无法按预期工作，因为尚未在画布上绘制图像。这里发生的是画布被清除，然后图像加载。正如 Mozilla在这里所说，

如果您尝试在图像加载完成之前调用 drawImage()，它不会执行任何操作（或者，在较旧的浏览器中，甚至可能抛出异常）。因此，您需要确保使用 load 事件，以免在图像加载之前尝试此操作：

类似于在 onload() 中使用 drawImage() 的方式，在图像加载和绘制后清除 Rectangle。

img.onload = function() { 

  ctx.drawImage(img, 0, 0);

  ctx.clearRect(0, 0, 300, 300);

};