最近在学习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)
{
$("#main").css("top",0);
}
else
{
$("#main").css("top",(h/2-240));
}
if(w<=640)
{
$("#main").css("left",0);
}
else
{
$("#main").css("left",(w/2-320));
}
});
};
var a=0;
var p=0;
function update()
{
if(p==0)
{
a++
if(a>=100000000)
{
a=0;
}
}
};
function draw()
{
var c=document.getElementById("mainC");
var cxt=c.getContext("2d");
cxt.clearRect(0,0,640,480);
if(p==0)
{
cxt.fillText("鼠标点击暂停计数",50,15);
}
else
{
cxt.fillText("鼠标点击恢复计数",50,15);
}
cxt.fillText(a,50,50);
};
document.onmousedown = function(e)
{
if(p==0)
{
p=1;
}
else
{
p=0;
}
};
document.onmouseup = function(e)
{
};
document.onmousemove = function(e)
{
};
document.onkeydown = function(e)
{
};
document.onkeyup = function(e)
{