javascript - 在 Canvas 上渲染多个对象之前清除 Canvas

Question

我在 Canvas 上渲染了多个对象，每个对象都监听 keydown 的定向移动，并使用 requestAnimationFrame 重绘。 .

问题是，如果我在每个对象的重绘上都设置了透明 Canvas ，那么在不同对象的重绘中将运行多个透明 Canvas 函数，导致对象闪烁。在 Canvas 上重新绘制(和清除)多个对象的最佳方法是什么。

function CreatePawn() {             
            var x = 25,
                y = 25;

            animate();

            function draw() {               
                ctx.clearRect(0, 0, cwidth, cheight);
                ctx.beginPath();
                ctx.lineWidth="3";
                ctx.arc(x, y, 2, 0, Math.PI * 2, true); // circle               
                ctx.stroke();               
            };

            function animate() {
                requestAnimationFrame( animate );
                if(left) x -= speed;
                if(up) y -= speed;
                if(right) x += speed;
                if(down) y += speed;
                draw();
            };

Answer 1

对我有用的解决方案是运行 1 个全局 setInterval(时间循环)，这将首先清除 Canvas ，然后循环重绘所有被插入数组的对象。

每个对象仍然可以有其内部时间循环来检查 x/y 变化，但重绘取决于全局 setInterval。