日期:2014-05-16  浏览次数:20410 次

请教一个新手问题
最近在学习CANVAS+JS游戏制作
写了一个测试程序
结果在页面正常显示的时候没有问题
可是一旦浏览器切换到其他tab页或者把浏览器最小化
画面就暂停不动了
有什么办法能够实现
在这种情况下
还是能够继续运行
即使draw不再描画
至少update要继续更新数据

谢谢了


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <link rel="icon" href="./image/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="./image/favicon.ico" type="image/x-icon" />
    <!--[if IE]>
    <script src="./js/jquery-1.10.2.min.js"></script>
    <![endif]-->
    <!--[if !IE]><!--> 
    <script src="./js/jquery-2.0.3.min.js"></script>
    <!--<![endif]-->
    <script src="./js/main.js"></script>
    <title>test</title>
  </head>
  <body>
    <div id="main">
      <canvas id="mainC"></canvas>
    </div>
  </body>
</html>



$(function()
  {
    init();
    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       ||
              window.webkitRequestAnimationFrame ||
              window.mozRequestAnimationFrame    ||
              function( callback ){
                window.setTimeout(callback, 1000 / 60);
              };
    })();
    (function animloop(){
      update();
      draw();
      requestAnimFrame(animloop);
    })();
  }
);

function init()
{
  $("body").css("background","#000000");
  $("body").css("overflow-x","hidden");
  $("body").css("overflow-y","hidden");
  var h=$(window).height();
  var w=$(window).width();
  $("#main").css("background","#FFFFFF");
  $("#main").css("position","absolute");
  $("#main").height(480);
  $("#main").width(640);
  $("#main").css("left",(w/2-320));
  $("#main").css("top",(h/2-240));
  $("#mainC").height(480);
  $("#mainC").width(640);
  $(window).resize(function(){
    var h=$(window).height();
    var w=$(window).width();
    if(h<=480)