Question

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

我有以下代码：

Canary Version 77.0.3812.0

哪个可行，所以这里没问题。

那我有：

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';

由于某种原因使我难以理解，clearRect不想按此顺序工作。

任何建议都将受到赞赏。

谢谢

Answer 1

clearRect（）无法按此处的预期效果工作，因为尚未在画布上绘制图像。这里发生的是清除画布，然后加载图像。正如Mozilla说的here，

如果您尝试在图像加载完成之前调用drawImage（），则它不会做任何事情（或者，在较旧的浏览器中，甚至可能会引发异常）。因此，您需要确保使用load事件，以便在图像加载之前不要尝试以下操作：

类似于onload（）中使用drawImage（）的方式，在加载并绘制图像后清除矩形。

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

如何修复clearRect？

1 个答案: