我可能在这里有一个荷马时刻,但我试图在每次迭代时清除 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>
最佳答案
代码中缺少用于清除路径的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>
关于javascript - 如何在 JS Canvas 中清除矩形?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30718360/