经过一些尝试,我终于找到了一个只需修改css属性的解决方案。
答案非常简单,尽管很长。
这是我的html-body:
<body onload='init()'>
<div id="canvasWrapper">
<canvas id="canvas" width="100px" height="100px"></canvas>
</div>
</body>
这是我的CSS代码:
*{
padding: 0;
margin: 0;
border: 0;
}
body{
overflow: hidden;
}
#canvasWrapper {
background-color: red;
display: inline-block;
}
重要的部分是我的canvas-wrapper的“inline-block”和body元素的“overflow: hidden”。似乎在画布下方有一些像素,这会使两个滚动条出现。
经过一些实验,我得到了以下的js代码:
function init(){
resizeCanvas();
window.onresize = function() { resizeCanvas(); }
}
每当屏幕尺寸发生变化时,我的“resize”函数将被调用。
整个技巧都在这个“resize”函数中完成:
function resizeCanvas() {
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
var cv = document.getElementsByTagName("canvas")[0];
var cc = document.getElementById("canvasWrapper");
var cx,cy;
var cleft=0;
if(x/y > sizeX/sizeY){
cx = (y*sizeX/sizeY);
cy = y;
cleft = (x-cx)/2;
}else{
cx = x;
cy = (x*sizeY/sizeX);
}
cc.setAttribute("style", "width:"+x+"px;height:"+y+"px;");
cv.setAttribute("style", "width:"+cx+"px;height:"+cy+"px;position: relative; left:"+cleft+"px");
}
这个函数计算窗口宽度和最大画布大小,而不改变比例。
之后,我将包装器div设置为全屏大小,将canvas元素的大小设置为先前计算出的大小。
一切都可以在不更改canvas元素内容和不重绘任何内容的情况下正常工作。
它是跨浏览器兼容的(已在Firefox 25、Chrome 31和Internet Explorer 11上进行了测试)
var sizeX = 1920, sizeY = 1080;
。 - majasizeX/sizeY
是我想要实现的比例。在我的情况下是16:9
。 - maja