Question

这就是我所拥有的，但是clearRect并没有像我期望的那样工作。这个盒子让路径。

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

<script>

var ctx = document.getElementById('canvas').getContext("2d");

var x=0;
!function loop() {
    requestAnimationFrame(loop);
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.rect(x++, 10, 80, 80);
    ctx.stroke();
}();

</script>

Answer 1

问题与ctx.clearRect无关。

ctx.rect添加到path，但您永远不会开始或结束新路径，因此对ctx.rect的所有调用都将添加到同一路径，累积矩形形状。

开始和结束新路径：

ctx.beginPath();
ctx.rect(x++, 10, 80, 80);
ctx.closePath();
ctx.stroke();

或使用ctx.strokeRect：

ctx.strokeRect(x++, 10, 80, 80);

为什么clearRect在这种情况下无法正常工作？

1 个答案: