Question

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

谁能看到我做错了什么？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

我如何在JS画布中清除？

1 个答案: