在背景标签上运行画布

本文介绍了在背景标签上运行画布的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我最近创建了一个HTML5画布动画（也使用Processing.js）。

I have recently created a HTML5 canvas animation (also using Processing.js).

问题是当我将浏览器切换到其他选项卡时，动画会停止

The problem is that when I switch the browser to a different tab the animation stops playing.

当用户位于与包含动画的选项卡不同的选项卡上时，如何允许动画继续播放？

How can I allow the animation to keep playing while the user is on a different tab than the one containing the animation?

示例： jsfiddle/EyFTr/3/

如果切换选项卡，时钟将停止，但如果打开链接，将打开一个新窗口并使该窗口模糊，时钟将仍然移动。

If you switch tabs the clock stops, but if you open the link a new window and blur the window the clock will still move.

推荐答案

最简单的答案是你做不到。

The short answer is you can't.

https：//开发人员。 mozilla/en/DOM/window.setTimeout

In（Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2）和Chrome 11，在非活动标签中，超时的触发频率不超过每秒一次（1000ms）。有关此问题的更多信息，请参见bug 633421；有关Chrome中有关此问题的信息，请参见crbug/66078。

In (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) and Chrome 11, timeouts are clamped to firing no more often than once per second (1000ms) in inactive tabs; see bug 633421 for more information about this in Mozilla or crbug/66078 for details about this in Chrome.

有问题的浏览器是该报价有些陈旧，但仍然有意义。这是设计使然。该选项卡处于非活动状态时，可以减少处理器负载。 （Processing.js将 setTimeout 用于动画）

Browsers in question are a bit old in that quote but its still relevant. This is by design. Its to reduce processor load when the tab isn't active. (Processing.js uses setTimeout for animations)

有几种方法可以修复此问题。它们涉及检查时间，一旦选项卡变为活动状态，就根据时间计算对象应在何处。但是，在您的示例中，尽管看起来它的代码将执行此操作，因为它的时钟始终是基于时间的。

Theres a few ways to "fix" this. They involve checking the time, and calculating where the object "should" be based on the time, once the tab becomes active. In your example however though it looks like your code will do that, since its a clock which is based the time anyway.