预想的结果是：
屏幕中间有个内切的正方形canvas区域
在canvas区域的左上角有个10*10的白色方块
结果canvas区域的显示没问题
可是白色方块……显示的很诡异
是不是我哪里写错了？
实在是找不到了
<!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 - prevTime) / 1000);
draw();
prevTime = nextTime;
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
};
function draw()
{
backBufferctx.fillStyle="#FFFFFF";
backBufferctx.fillRect(0,0,10,10);
cxt.drawImage(this.backBuffer,0,0);
}
function update(seconds)
{
}
------解决方案--------------------
backBuffer.style.width='10px'; //这个是渲染大小
backBuffer.style.height='10px';
backBuffer.width='10'; //这个是分辨率
backBuffer.height='10';
如果上面设置属性不行 你要保证建立出来的 canvas至少是这样的
<canvas width='10' height='10'></canvas>