画布动画停止播放时，点击home键(切换应用程序)在移动设备上

canvas animation stops playing when click homebutton (switch apps) on mobile device

本文关键字：应用程序移动 home 动画布动画播放点击更新时间：2023-09-26

我在移动设备/平板电脑上的画布动画有问题。动画运行得很好，直到我点击"home"或"switchapp"按钮，然后改变设备的"旋转"。当我切换回具有画布动画的浏览器窗口时，它被冻结并且不会再次播放。

这里是小提琴:jsfiddle.net/nLmjchqv/

是否有可能再次运行动画(如重新启动画布)?是否有可能检测应用程序切换或home按钮点击在JavaScript?

谢谢。

您可以监听pageshow和pagehide事件(参见MDN)

例如，您可以在pagehide上调用cancelAnimationFrame，然后在pageshow上再次启动requestAnimationFrame的动画

谢谢Christoph，

听了你的劝告，我终于找到了一个解决办法。

<canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
        //raf polyfill
        (function() {
      var lastTime = 0;
      var vendors = ['webkit', 'moz'];
      for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
          window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
          window.cancelAnimationFrame =
            window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
      }
      if (!window.requestAnimationFrame)
          window.requestAnimationFrame = function(callback, element) {
              var currTime = new Date().getTime();
              var timeToCall = Math.max(0, 16 - (currTime - lastTime));
              var id = window.setTimeout(function() { callback(currTime + timeToCall); },
                timeToCall);
              lastTime = currTime + timeToCall;
              return id;
          };
      if (!window.cancelAnimationFrame)
          window.cancelAnimationFrame = function(id) {
              clearTimeout(id);
          };
  }());
        function drawRectangle(myRectangle, context) {
            context.beginPath();
            context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
            context.fillStyle = '#8ED6FF';
            context.fill();
            context.lineWidth = myRectangle.borderWidth;
            context.strokeStyle = 'black';
            context.stroke();
        }
  var rafId;
  function animate() {
            if (myRectangle.dir == 'right') {
                myRectangle.x += 5;
            }
            if (myRectangle.dir == 'right' && myRectangle.x >= canvas.width - myRectangle.width) {
                myRectangle.dir = 'left';
            }
            if (myRectangle.dir == 'left' && myRectangle.x <= 0) {
                myRectangle.dir = 'right';
            }
            if (myRectangle.dir == 'left') {
                myRectangle.x -= 5;
            }
            // clear
            context.clearRect(0, 0, canvas.width, canvas.height);
            drawRectangle(myRectangle, context);
            // request new frame
            rafId = requestAnimationFrame(animate);
        }
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var myRectangle = {
            x: 0,
            y: 75,
            width: 100,
            height: 50,
            borderWidth: 5,
            dir: 'right'
        };
  animate();
  var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
  window.addEventListener(orientationEvent, function() {
      cancelAnimationFrame(rafId);
      canvas = document.getElementById("myCanvas");
      var cw = canvas.width;
      var ch = canvas.height;             
      canvas.outerHTML = "";
      delete canvas;
      canvas = document.createElement('canvas');
      canvas.id = "myCanvas";
      canvas.width = cw;
      canvas.height = ch;
            document.body.appendChild(canvas);
      context = canvas.getContext('2d');
      rafId = requestAnimationFrame(animate);
  }, false);
    </script>

这里有一个小提琴:http://jsfiddle.net/cszkmsLs/