Javascript HTML画布动画序列图像在IPAD上速度较慢

我构建了一个脚本，它获取一系列图像，并将它们显示在动画循环中的画布元素上

这在我的桌面上运行得非常好，但在IPAD（3视网膜）上运行速度非常慢。你能提出改进性能的方法吗

var videoItts = 0;

function playVideo() {
    if(videoItts < 92) {
       setTimeout(function() {
           ctx.clearRect(0,0,canvas.width,canvas.height)
           ctx.drawImage(imagesL[videoItts],0,0,1024,636);
           requestAnimationFrame(playVideo);
           videoItts ++;
       }, 1000/22)  
     }
}
requestAnimationFrame(playVideo);

var-videoItts=0；
函数playVideo（）{
如果（视频itts<92）{
setTimeout（函数（）{
clearRect（0,0，canvas.width，canvas.height）
ctx.drawImage（imagesL[videoItts]，0,01024636）；
请求动画帧（播放视频）；
videoItts++；
}, 1000/22)  
}
}
请求动画帧（播放视频）；

---

imagesL是预加载图像的数组。

我建议不要将setTimeout和requestAnimationFrame混合使用。您可以仅使用requestAnimationFrame解决此问题：

var startTime = Date.now();
var fps = 22;
var lastDrawnIndex = null;
var totalFrames = 92;

function drawVideo() {
    var currTime = Date.now();
    var currFrameIndex = Math.round((currTime - startTime) / (1000/fps)) % totalFrames;

    // Since requestAnimationFrame usually fires at 60 fps, 
    // we only need to draw the image if the frame to draw 
    // actually has changed from last call to requestAnimationFrame
    if (currFrameIndex !== lastDrawnIndex) {
        ctx.drawImage(imagesL[videoItts],0,0,1024,636);
        lastDrawnIndex = currFrameIndex;
    }
    requestAnimationFrame(drawVideo);
}

requestAnimationFrame(drawVideo);

其思想是，对于每个对requestAnimationFrame的调用，我们都会根据经过的时间和所需的动画帧速率来计算要绘制的帧索引。如果它和上次计算的帧索引不同，我们就画它。然后，我们通过在末尾调用requestAnimationFrame（drawVideo），将drawVideo安排为调用下一个动画帧

---

上面的代码将以22 fps的速度连续循环帧0-91。我删除了ctx.clearRect调用，仅当帧包含透明度时才需要它。所以你可能想把它加回去。

谢谢你的建议，但它仍然难以在IPAD上运行