在画布上渲染多个对象之前清除画布答案

【问题标题】：Clear canvas before Multiple Objects Render on Canvas在画布上渲染多个对象之前清除画布
【发布时间】：2011-07-28 05:29:18
【问题描述】：

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

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

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();
            };

【问题讨论】：

标签： javascript html animation canvas

【解决方案1】：

对我有用的解决方案是运行 1 个全局 setInterval（时间循环），这将首先清除画布，然后循环重绘所有推入数组的对象。

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

【讨论】：

如果 "redrawing 取决于全局 setInterval" 你的意思是它循环通过活动对象数组并调用myObject.draw()，那么这就是我的建议.很抱歉您没有弄清楚，但感谢您提供投反对票的原因。

【解决方案2】：

我以为我认出了这个功能......

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

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

【讨论】：