Javascript 如何修复画布中球的闪烁？

使用新的构造函数ball（颜色）创建ball的对象类型。 它的属性包括在画布上绘制它所需的所有内容，并使它沿随机方向移动。 当创建一个球时，orangeBall=new ball（'orange'），它会很好地显示，包括在画布上的移动。但当添加另一个时，它们都开始闪烁。 如何解决？ 谢谢

כדורים קופצים רנדומלית בצבעים שונים
html，正文{
保证金：0；
填充：0；
背景：黑色；
}
.container{宽度：900px；边距：0自动；}
#画布{背景：#8613eb；边框：1px实心#cbcbcb；}
var-ctx；
var H=800；
var W=800；
window.onload=函数（）{
ctx=canvas.getContext（“2d”）；
宽度=W；
画布高度=H；
功能球（彩色）{
//寿命-在屏幕上显示球的时间量
this.life=60*1000，//1分钟
this.color=arguments.length==1？颜色：“白色”；
this.x=Math.round（Math.random（）*W）；
this.y=Math.round（Math.random（）*H）；
this.radius=10+Math.round（Math.random（）*50）；//介于10-60之间
this.dx=1+Math.round（Math.random（）*5）；//介于1-6之间
this.dy=2+Math.round（Math.random（）*4）；//介于2-6之间
这个.startAngel=0；
this.endAngel=2*Math.PI；//360deg
this.speed=3+Math.round（Math.random（）*50）//3-50ms
this.show=函数（）{
//首先清除前一个球
clearRect（0,0，canvas.width，canvas.height）；
var xClear=（this.x-this.radius）在每个球都用其
show
函数画出自己之后，您正在清理整个画布。与其让球清理画布，不如用一个间隔调用一个函数，该函数将清理画布一次，然后迭代所有球并绘制它们。
在每个球都用h其
show
功能。与其让球清除画布，不如设置一个间隔，调用一个函数，该函数将清除画布一次，然后迭代所有球并绘制它们。
动画被分为多个帧。一帧约为1/60秒，在此期间绘制所有动画

为了帮助制作动画，浏览器有一个函数，您可以使用该函数调用渲染帧的函数。
requestAnimationFrame（yourfunction）

requestAnimationFrame
将告诉浏览器您正在对动画进行更改。这将停止向显示器显示画布，直到下一次垂直显示器刷新

使用
setInterval
或
setTimeout

function animateSomething(){
    // draw something    

} // as soon as this exits the content of the canvas is moved to the display
  // there is no way to know where the display hardware is writing pixels to 
  // display, could be halfway through drawing a ball
setInterval(animateSomething,1000 / 60);

如果每次退出时对许多对象执行此操作，则像素将移动到显示器上，而不考虑显示器硬件正在执行的操作。这会导致闪烁、剪切和其他问题

使用
requestAnimationFrame

function animateSomething(){
    // draw something 
    requestAnimationFrame(animateSomething)   

} // The content of the canvas does not move to the display until the
  // display hardware is getting ready to scan the next display refresh
requestAnimationFrame(animateSomething);

处理动画的最佳方法是从一个函数执行所有渲染

下面，我修改了您的代码，使用
requestAnimationFrame
删除闪烁。我添加了一个
mainLoop
函数来绘制所有球。我让浏览器处理计时


var-ctx；
var H=800；
var W=800；
window.onload=函数（）{
ctx=canvas.getContext（“2d”）；
画布宽度=W；
canvas.height=H；
功能球（彩色）{
//寿命-在屏幕上显示球的时间量
this.life=60*1000；//1分钟
this.color=arguments.length==1？颜色：“白色”；
this.x=Math.round（Math.random（）*W）；
this.y=Math.round（Math.random（）*H）；
this.radius=10+Math.round（Math.random（）*50）；//介于10-60之间
this.dx=1+Math.round（Math.random（）*5）；//介于1-6之间
this.dy=2+Math.round（Math.random（）*4）；//介于2-6之间
这个.startAngel=0；
this.endAngel=2*Math.PI；//360度
this.speed=3+Math.round（Math.random（）*50）//3-50ms
this.show=函数（）{
//首先清除前一个球
ctx.beginPath（）；
ctx.fillStyle=this.color；
this.x+=this.dx；
this.y+=this.dy；
if（this.x<0 | | this.x>W）{
this.dx=-this.dx；
}
if（this.y<0 | | this.y>H）{
this.dy=-this.dy；
}
ctx.arc（this.x，this.y，this.radius，this.startAngel，this.endAngel）；
ctx.closePath（）；
ctx.fill（）；
this.life-=this.speed；
}
};
橙色球=新球（“橙色”）；
blackBall=新球（“黑色”）；
白球=新球（“白色”）；
黄色球=新球（“黄色”）；
pinkBall=新球（“粉色”）；
蓝球=新球（“蓝色”）；
绿色球=新球（“绿色”）；
var balls=[桔球、黑球、白球、黄球、乒乓球、蓝球、绿球]；
函数mainLoop（）{
clearRect（0，0，canvas.width，canvas.height）；
对于（变量i=0；i0）{
球[i].show（）；
}
}
requestAnimationFrame（主循环）；
}
requestAnimationFrame（主循环）；
}；
html，
身体{
保证金：0；
填充：0；
背景：黑色；
}
.集装箱{
宽度：900px；
保证金：0自动；
}
#帆布{
背景：#8613eb；
边框：1px实心#cbcbcb；
}

您的浏览器不支持此游戏。
动画被分为多个帧。一个帧约为1/60秒，在这段时间内绘制所有动画

为了帮助制作动画，浏览器有一个函数，您可以使用该函数调用渲染帧的函数。
requestAnimationFrame（yourfunction）

requestAnimationFrame
将告诉浏览器您正在对动画进行更改。这将停止向显示器显示画布，直到下一个垂直显示参考
function animateSomething(){
    // draw something 
    requestAnimationFrame(animateSomething)   

} // The content of the canvas does not move to the display until the
  // display hardware is getting ready to scan the next display refresh
requestAnimationFrame(animateSomething);