这是我所拥有的，但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>
这个问题无关紧要ctx.clearRect。
ctx.rect将添加到路径，但是您永远不会开始或结束新路径，因此对的所有调用都ctx.rect将添加到同一路径中，从而积累了矩形形状。
开始和结束新路径：
ctx.beginPath();
ctx.rect(x++, 10, 80, 80);
ctx.closePath();
ctx.stroke();
或使用ctx.strokeRect：
ctx.strokeRect(x++, 10, 80, 80);
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句