如何修复清除矩形

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(( 的方式，在加载和绘制图像后清除矩形。

img.onload = function() { 
  ctx.drawImage(img, 0, 0);
  ctx.clearRect(0, 0, 300, 300);
};