日期:2014-05-16 浏览次数:20382 次
<!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="stylesheet" rev="stylesheet" href="./css/style.css" type="text/css" media="all" />
<link rel="icon" href="./image/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="./image/favicon.ico" type="image/x-icon" />
<script src="./js/main.js"></script>
<title>test</title>
</head>
<body>
<canvas id="main"></canvas>
</body>
</html>
var can;
var cxt;
var backBuffer;
var backBufferctx;
var width;
var height;
var size;
var inLeft;
var inTop;
window.onload = function() {
can = document.getElementById("main");
cxt = can.getContext("2d");
backBuffer=document.createElement('canvas');
backBufferctx=this.backBuffer.getContext('2d');
function onresize() {
width = innerWidth;
height = innerHeight;
if(width > height)
{
size = height;
inLeft = (width - size)/2;
inTop = 0;
}
else
{
size = width;
inLeft = 0;
inTop = (height - size)/2;
}
can.style.left = inLeft + 'px';
can.style.top = inTop + 'px';
can.style.width = size + 'px';
can.style.height = size + 'px';
backBuffer.style.width='10px';
backBuffer.style.height='10px';
draw();
}
onresize();
window.onresize = onresize;
var requestAnimationFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
function(callback) { setTimeout(callback, 0); };
var prevTime = new Date().getTime();
function animate() {
var nextTime = new Date().getTime();
update((nextTime