Javascript，如何加载，绘制和循环120帧

Javascript, how to load, draw and loop 120 frames?

本文关键字：绘制 120帧 循环 何加载 Javascript 加载      更新时间：2023-09-26

我正在尝试将 120 张图像加载到数组中：

var bgframes = [];
for(i=0; i<119; i++)
{
 var frameX = new Image();
 if (i>99)
 {
  frameX.src = 'src/bg/background_00'+i+'.jpg';
  bgframes.push(frameX);
 }
 else if (i>9)
 {
  frameX.src = 'src/bg/background_000'+i+'.jpg';
  bgframes.push(frameX);
 }
 else
 {
  frameX.src = 'src/bg/background_0000'+i+'.jpg';
  bgframes.push(frameX);
 }
}

然后尝试遍历它们，使用以下方法将它们绘制在画布上：

var bgf=0;
setInterval(drawFrame,1000/60);
function drawFrame()
{
  if (bgf>119){bgf=0;}
  ctx.clearRect(0,0,myCanvas.width,myCanvas.height);
  ctx.drawImage(bgframes[bgf],0,0);
  bgf++;
}

测试这个，动画将播放一次，然后我会得到：未捕获的类型错误：无法在"CanvasRenderingContext2D"上执行"drawImage"：提供的值不是类型"（HTMLImageElement 或 HTMLVideoElement 或 HTMLCanvasElement 或 ImageBitmap）"

您的 for 循环仅填充 119 张图像（0 到 118 ...119不少于119）

但是您的 drawFrame 函数从 0 循环到 119

将 for 循环更改为 

for(i=0; i<120; i++)

我还建议更改drawFrame代码，如下所示

function drawFrame() {
  ctx.clearRect(0,0,myCanvas.width,myCanvas.height);
  ctx.drawImage(bgframes[bgf],0,0);
  bgf = (bgf + 1) % bgframes.length; // if bgframes length changes, no need to change the code here as well
}

我也可以建议像这样使用requestAnimationFrame

吗 
var bgf=0;
function drawFrame() {
    ctx.clearRect(0,0,myCanvas.width,myCanvas.height);
    ctx.drawImage(bgframes[bgf],0,0);
    bgf = (bgf + 1) % bgframes.length;
    window.requestAnimationFrame(drawFrame);
}
window.requestAnimationFrame(drawFrame);

无论如何，requestAnimationFrame 通常以 60/秒的速度运行

相关文章：