canvas做动画时，切到其他tab再切回来，中间的动画没有执行。直接从切出时跳到了切回来的状态。_Html5_论坛

canvas做动画时，切到其他tab再切回来，中间的动画没有执行。直接从切出时跳到了切回来的状态。

踏***e 分类：Html5 人气：862 回帖：1 发布于6年前收藏

这是正常运行，会画一个圆。

如果我中途切出tab在回来。就会变成这样了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>aaa</title>
 
</head>

<body>
    <canvas id="demoCanvas" width="500" height="700"></canvas>
    <script>
    var canvas = demoCanvas;
    var ctx = canvas.getContext('2d');
    var startTime = Date.now();
    var duration = 11100;
    var r = 100;

    requestAnimationFrame(animate)


    var p = Math.min(1.0, (Date.now() - startTime) / duration);
    var tx = r * Math.sin(2 * Math.PI * p) + 200,
        ty = -r * Math.cos(2 * Math.PI * p) + 200;
    ctx.fillStyle = 'green';
    ctx.beginPath();
    ctx.moveTo(tx, ty);


    function animate() {
        // ctx.clearRect(0,0,1000,1000);

        var p = Math.min(1.0, (Date.now() - startTime) / duration);
        var tx = r * Math.sin(2 * Math.PI * p) + 200,
            ty = -r * Math.cos(2 * Math.PI * p) + 200;

        ctx.lineTo(tx, ty);
            ctx.stroke();

        if (p < 1.0) requestAnimationFrame(animate)
    }
    </script>
</body>

</html>

标签：canvas html5 javascript

讨论这个帖子（1）垃圾回帖将一律封号处理……

Lv3 码奴

tu***23 其它 6年前#1

一年过去了，还是自己回来解决自己提出的问题吧。可能是一开始没有描述清楚问题，没有人来回答我。哈哈

是这样的，为了性能和电量，RequestAnimationFrame 在页面后台运行或者不可见的<iframe>里面会降低帧率，从这个情形看，chrome浏览器中，页面后台运行时，回调函数是不被调用的。

从上面代码可以看出，我所画的点是根据时间来计算出来的位置，我用了当前时间减去了开始时间，这样的话，离开页面以后当前时间也是会走的，但RequestAnimationFrame并不工作，所以中间的点自然被忽略了，我们要保持时间的连续性，所以可以记录离开页面的时间，每次计算的时候，用当前时间减去开始时间再减去离开的时间，算出真正在页面中，也就是RequestAnimationFrame正常工作的时间，当然，使用这种方式，离开页面的时候画圆过程也将会被停止，回来以后继续画。

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>aaa</title>
 
</head>

<body>
    <canvas id="demoCanvas" width="500" height="700"></canvas>
    <script>
    var canvas = demoCanvas;
    var ctx = canvas.getContext('2d');
    var startTime = Date.now();
    var duration = 11100;
    var r = 100;
    
    let leaveTime;
    let allLeaveTime = 0;

    requestAnimationFrame(animate)


    var p = Math.min(1.0, (Date.now() - startTime) / duration);
    var tx = r * Math.sin(2 * Math.PI * p) + 200,
        ty = -r * Math.cos(2 * Math.PI * p) + 200;
    ctx.fillStyle = 'green';
    ctx.beginPath();
    ctx.moveTo(tx, ty);


    function animate() {
        // ctx.clearRect(0,0,1000,1000);

        var p = Math.min(1.0, (Date.now() - allLeaveTime - startTime) / duration);
        var tx = r * Math.sin(2 * Math.PI * p) + 200,
            ty = -r * Math.cos(2 * Math.PI * p) + 200;

        ctx.lineTo(tx, ty);
            ctx.stroke();

        if (p < 1.0) requestAnimationFrame(animate)
    }


    document.addEventListener('visibilitychange', function (e) {
        if (e.target.hidden) {
            leaveTime = Date.now();
        } else {
            allLeaveTime += (Date.now() - leaveTime);
        }
    })
    </script>
</body>

</html>

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取