HTML Canvas 动画不会在移动设备上运行

Question

canvas 动画在网络浏览器上有效运行，但在使用 iPad 和 iPhone 的移动浏览器上测试时，动画永远不会启动。它只是简单地显示背景图像。没有给出错误消息。

动画基本上是一个图像，它从 canvas 左侧的屏幕外移动，并在达到 canvas 宽度的 75% 时停止。

这是代码

  <script>

  window.addEventListener("load", eventWindowLoaded, false);
        function eventWindowLoaded () {
        start();
    }

    function canvasSupport () {
        return Modernizr.canvas;
    }  

    var canvas = document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d");    
    var cw=canvas.width;
    var ch=canvas.height;

    var image1 = new Image();
    image1.onload = function() {
        ctx.clearRect(0, 0, 600, 400);
        ctx.drawImage(image1, 0, 0);
    }
    image1.src="images/oven.jpg";   
    ctx.fillStyle = image1;

    var currentX=cw;
    var continueAnimating=true;
    var nextMoveTime,maxMoves;
    var expX = 50;
    var expY = 200;


    var image2 = new Image();
    image2.onload=start;
    image2.src="images/pies.png"; 

    var image = new Image();
    image.onload=start;
    image.src="images/pies.png"; 



    function start(){

      maxMoves=(cw+image.width)*0.5;

      nextMoveTime=performance.now();

      requestAnimationFrame(animate);




    function animate(currentTime){

      if(continueAnimating){ requestAnimationFrame(animate); }

      if(currentTime<nextMoveTime){return;}

      nextMoveTime=currentTime; // + delay;


      ctx.drawImage(image,currentX,193);

      if(--currentX<-image.width){ currentX=cw; }

      if(--maxMoves<0){continueAnimating=false;}
}
}

</script>

Answer 1

var now =
    ( typeof performance === 'object' && 'now' in performance )
    ? function() { return performance.now(); }
    : function() { return ( new Date ).getTime(); };

Answer 2

所以问题出在您对 performance.now 的使用上，它并不总是被实现，尤其是在移动设备上，精确计时器的功耗过高。
只需使用 requestAnimationFrame 提供的时间：准确 browsers/devices 时，它将使用亚毫秒精度，否则将只有毫秒精度。
（准确 = Chrome 当然是桌面，...其他 ???）

我将在下面让您看到我如何使用 rAF 的时间来构建当前 'dt' = 自上一帧以来经过的时间，以及 'applicationTime' = 应用程序中经过的时间（不计算您从应用程序中跳出的时间。

此方法的第二个好处是您可以轻松更改应用程序速度以达到 'bullet-time' 或加速（如果速度 <0，甚至倒带）。

fiddle 在这里：

http://jsfiddle.net/gamealchemist/KVDsc/

// current application time, in milliseconds.
var applicationTime = 0;    
// scale applied to time. 
// 1 means no scale, <1 is slower, >1 faster.
var timeSpeed = 1;

// after launchAnimation is called, 
//  draw/handleInput/update will get called on each rAF
function launchAnimation() {
    requestAnimationFrame(_launchAnimation);
}

// ------------- Private methods ----------------

function _launchAnimation(now) {
    _lastTime = now;
    applicationTime = 0
    requestAnimationFrame(_animate);
}

// ----------------------------------------------
// Animation.
//   Use launchAnimate() to start the animation.
//     draw, handleInput, update will be called every frame.
// ----------------------------------------------
function _animate(now) {
    requestAnimationFrame(_animate);
    // _______________________
    var dt = now - _lastTime;
    if (dt < 12) return; // 60 HZ max
    if (dt > 200) dt = 16; // consider 1 frame elapse on tab-out 
    _lastTime = now;
    dt *= timeSpeed;
    applicationTime += dt;
    // _______________________
    handleInput(); // ...
    // update everything with this frame time step.
    update(dt);
    // draw everything    
    draw();
}
var _lastTime = 0;

(( 请注意，要最优雅地处理跳出，您必须处理模糊事件，取消 rAF，然后再次将其设置为焦点。))

HTML Canvas 动画不会在移动设备上运行

HTML Canvas animation wont run on mobile devices

html

javascript

mobile

canvas

html5-canvas

HTML Canvas 动画不会在移动设备上 运行

HTML Canvas animation wont run on mobile devices

html

javascript

mobile

canvas

html5-canvas

HTML Canvas 动画不会在移动设备上运行