如何修复clearRect？

Question

作为介绍，我是 JS 的初学者，所以也许以下问题的答案很简单，但我只是没有看到。

我有以下代码：

let canvas = document.getElementById('canvas')

let ctx = canvas.getContext('2d');

canvas.width = window.innerWidth

canvas.height = window.innerHeight

let 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);};