Question

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

问题是，如果我在每个对象的重绘上设置了清晰的画布，那么将会有不止一个清晰的画布函数在btw不同对象的重绘中运行，导致对象闪烁。在画布上重绘（和清除）多个对象的最佳方法是什么。

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（时间循环），首先清除画布，然后循环重绘所有被推入数组的对象。

每个对象仍然可以使用其内部时间循环来检查x / y更改，但重绘最多是全局setInterval。

Answer 2

我以为我认识到了这个功能......

潜在的问题是，您的主板的画布不应该是Pawn对象的一部分，而应该是一个包罗万象的Board对象的一部分。

然后该对象应该处理动画事件，清除自身，然后调用每个pawn的draw()方法，它应该传递给适当的上下文。

在“画布上的多个对象渲染”之前清除画布

2 个答案: