Javascript 为什么这个画布动画偶尔会扰乱自己？

对于我正在创建的网站，我使用HTML5

canvas

编码了一个视差背景。运行下面的代码段将生成192x192的背景动画示例

功能视差刺激器（大小、颜色、速度、网格、扇区、种子）{
var scr=document.getElementById（“视差”+扇区）；
var ctx=scr.getContext（“2d”）；
ctx.fillStyle=“#000”；
ctx.fillRect（0,0，scr.宽度，scr.高度）；
var xGridMax=Math.ceil（scr.width/grid）；
var yGridMax=数学单元（scr.高度/网格）+1；
var seedList=prng（seed，yGridMax*2）；
对于（var c=0；c0）{
seedList=seedList.slice（seedList.length-rotation）.concat（seedList.slice（0，seedList.length-rotation））；
}
ctx.fillStyle=颜色；
对于（VarA=0；a我算出了！

rotation2
应按模计算
xGridMax+1
，而不是
xGridMax

因此，正确的动画（大版本）是：


功能视差刺激器（大小、颜色、速度、网格、扇区、种子）{
var scr=document.getElementById（“视差”+扇区）；
var ctx=scr.getContext（“2d”）；
ctx.fillStyle=“#000”；
ctx.fillRect（0,0，scr.宽度，scr.高度）；
var xGridMax=Math.ceil（scr.width/grid）；
var yGridMax=数学单元（scr.高度/网格）+1；
var seedList=prng（seed，yGridMax*2）；
对于（var c=0；c0）{
seedList=seedList.slice（seedList.length-rotation）.concat（seedList.slice（0，seedList.length-rotation））；
}
ctx.fillStyle=颜色；
对于（VarA=0；a我算出了！

rotation2
应按模计算
xGridMax+1
，而不是
xGridMax

因此，正确的动画（大版本）是：


功能视差刺激器（大小、颜色、速度、网格、扇区、种子）{
var scr=document.getElementById（“视差”+扇区）；
var ctx=scr.getContext（“2d”）；
ctx.fillStyle=“#000”；
ctx.fillRect（0,0，scr.宽度，scr.高度）；
var xGridMax=Math.ceil（scr.width/grid）；
var yGridMax=数学单元（scr.高度/网格）+1；
var seedList=prng（seed，yGridMax*2）；
对于（var c=0；c0）{
seedList=seedList.slice（seedList.length-rotation）.concat（seedList.slice（0，seedList.length-rotation））；
}
ctx.fillStyle=颜色；
对于（var a=0；aI尝试过，但您的代码太疯狂了，我无法理解。您的网格在每个周期都被重新创建，这是没有效率的。请尝试分部分进行分离，首先生成随机网格，将其存储在变量中，然后仅将动画代码放在窗口中。requestAnimationFrame（animate）@CharlesCavalcante PRNG功能实际上非常快，动画甚至在我廉价的Android手机上也能完美工作。我知道这很快，但你不需要每次我尝试都重新创建网格，但你的代码真的很疯狂，我无法理解。你的网格每一个周期都在重新创建，这是没有效率的。试着分开部分情况下，首先生成随机网格，将其存储在一个变量中，并在窗口中仅放置动画代码。requestAnimationFrame（animate）；@CharlesCavalcante PRNG函数实际上非常快，即使在我廉价的安卓手机上，动画也能完美工作。我知道这很快，但你不需要每次都再次创建网格