Javascript画布一项闪烁

我试图让物体在画布上相互移动，当它们相遇和重叠时，一个会消失，另一个会掉下来。现在我得到了动画，但其中一个项目正在闪烁

画布{边框：#666 3px实心；}
函数图（x，y）{
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
ctx.save（）；
ctx.clearRect（x，y，600400）；
ctx.fillStyle=“rgba（0200,0,1）”；
ctx.fillRect（x，y，70，50）；
ctx.restore（）；
x-=0.5；
如果（x==300）
{
返回；
};
var loopTimer=setTimeout（'draw（'+x+'，'+y+'），5）；
};
功能图1（w、e）{
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
ctx.save（）；
ctx.clearRect（w-1，e-2600400）；
ctx.fillStyle=“rgba（0200,0,1）”；
ctx.fillRect（w，e，70，50）；
ctx.restore（）；
w+=1；
如果（w==265）
{
w-=1；
e+=2；
};
var loopTimer=setTimeout（'draw1（'+w+'，'+e+'），10）；
};

两个绘图函数中ctx.clearReact的前两个参数应为0：

ctx.clearRect（0,060400）

---

这意味着您需要清除所有画布。

您的动画制作方法非常过时（即使用

setTimeout

）。相反，您应该使用如下所示的方法。这将提供平滑、无闪烁的动画

画布{边框：#666 3px实心；}
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
变量x=530，y=15；
函数animate（）{
requestID=requestAnimationFrame（动画）；
ctx.clearRect（x，y，600400）；
ctx.fillStyle=“rgba（0200,0,1）”；
ctx.fillRect（x，y，70，50）；
x-=0.5；
如果（x==300）
{
取消动画帧（请求ID）
};
}

每秒渲染的帧太多，迫使浏览器显示帧。每次draw函数返回时，浏览器都假定您希望向页面显示框架

动画需要与显示器刷新速率同步，对于大多数设备，刷新速率为60FPS。为此，您有一个处理所有动画的渲染循环。您可以通过

requestAnimationFrame

（RAF）调用此函数，以确保动画与显示硬件和浏览器渲染保持同步

画布{边框：#666 3px实心；}
var画布，ctx，x，y，w，e；
var画布，ctx，x，y，w，e；
函数绘图（）{
ctx.fillStyle=“rgba（0200,0,1）”；
ctx.fillRect（x，y，70，50）；
};
功能图1（w、e）{
ctx.fillStyle=“rgba（0200,0,1）”；
ctx.fillRect（西、东、70、50）；
};
函数更新（time）{//RAF调用此函数时经过的高精度时间
ctx.clearRect（0,0，canvas.width，canvas.height）；//清除所有画布
如果（w+70>=x）{
e+=2；
}否则{
x-=0.75；
w+=1；
};
绘制（x，y）；
图1（w，e）；
requestAnimationFrame（更新）
//此时，函数退出，浏览器显示
//用于显示的画布位图
}
函数start（）{//设置
x=530；
y=15；
w=1；
e=15；
canvas=document.getElementById（'canvas'）；
ctx=canvas.getContext（'2d'）；
requestAnimationFrame（更新）
}
window.addEventListener（“加载”，启动）；

祝贺你-你刚刚让两个项目都闪烁了@杰米克，你应该在投票前再检查一下。运行他的代码以查看问题。然后换成我的，看看我的解决方案。我将OP的代码片段复制到一个新的答案中，将前两个参数的所有

clearRect

更改为0,0，然后运行它。你检查过了吗？是的，现在两个都在你的JSFIDLE上闪烁！在任何情况下，我看不出如何从0，0清除整个画布是这个问题的答案。精彩的答案！这是完美的作品，调整了一点，供我使用。谢谢！