javascript - 如何在 JS Canvas 中清除矩形？

Question

我可能在这里有一个荷马时刻，但我试图在每次迭代时清除 Canvas 以显示方形旋转，但clearRect似乎不起作用。

有人能看出我做错了什么吗？

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var angle = 0;
setInterval(function() {
  angle++;

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.save();

  ctx.translate(100, 100);
  ctx.rotate(angle);
  ctx.rect(0, 0, 30, 30);
  ctx.stroke();

  ctx.restore();

}, 50);

<canvas width='300' height='300' id='myCanvas'></canvas>

Answer 1

代码中缺少用于清除路径的beginPath()。这将导致每次重绘所有矩形(并最终减慢整个过程)。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var angle = 0;

setInterval(function() {
  angle++;

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.save();
  ctx.translate(100, 100);
  ctx.rotate(angle);

  ctx.beginPath();
  ctx.rect(0, 0, 30, 30);
  ctx.stroke();

  ctx.restore();

}, 50);

<canvas width='300' height='300' id='myCanvas'></canvas>