clearRect with SetInterval

Question

在我的代码下面

＆＃13;

＆＃13;

var canvas, context;
var canvas = document.getElementById('board');
var context = canvas.getContext('2d');

var hex = 50;

function drawHex(hexGain) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  if (hexGain <= 0) return;
  x = canvas.width / 2 - hexGain;
  y = canvas.height / 2;
  context.moveTo(x, y);
  x += hexGain / 2;
  y -= hexGain / 2;
  context.lineTo(x, y); // now render it per our style definitions
  x += hexGain;
  y += 0;
  context.lineTo(x, y);
  x += hexGain / 2;
  y += hexGain / 2;
  context.lineTo(x, y);
  x -= hexGain / 2;
  y += hexGain / 2;
  context.lineTo(x, y);
  x -= hexGain;
  y += 0;
  context.lineTo(x, y);
  x -= hexGain / 2;
  y -= hexGain / 2;
  context.lineTo(x, y);
  context.strokeStyle = "rgba(0,0,0,1)";
  context.stroke();
}

window.setInterval(function() {
  drawHex(hex);
  hex -= 5;
}, 1000);

＆＃13;

<canvas id="board"></canvas>

＆＃13;

＆＃13;

＆＃13;

我无法画六角形，等一下，清理画布，画一个较小的画布，等等。 我不明白为什么不调用clearRect。 我基本上需要一个越来越小的六边形动画

此致

Answer 1

开始绘画时忘记拨打context.beginPath()。

所以正在发生的事情是画布确实正在清理，但是你正在为正在绘制的“路径”添加第二个六边形。另一个，另一个。