如何在我的 JS canvas 中使用 clearRect？

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>

如何在我的 JS canvas 中使用 clearRect？

How do I clearRect in my JS canvas?

html

javascript

canvas

html5-canvas