调整画布大小

我试图设计一个使用弹性盒的网页，以便适合任何类型的屏幕大小。我的主屏幕有一个画布，所以......这是在初始化过程中调整画布大小的最佳方式？调整画布大小

我已经尝试了这两种方法。我的第一个方法是使用CSS并为其大小设置一个百分比。例如，宽度= 100％，高度= 100％。尽管设计很有效，但我发现在使用画布的线条时遇到了很多问题。例如，当拖动一个项目时，我的鼠标坐标放大十倍左右。尽管我可以管理，我认为这不是最好的方法。

第二种方法是在onload和onresize事件被激发时设置固定大小。我在做这样的事情：

window.initHeight = window.screen.height; 
window.initWidth = window.screen.width; 
/*The height of the navbar.*/ 
navbar.height = document.getElementById('navbar').offsetHeight; 

canvas = document.getElementById('canvasStage'); 
canvas.width = window.initWidth; 
canvas.height = window.initHeight - navbar.height; 

canvas.setAttribute("width", canvas.width); 
canvas.setAttribute("height", canvas.height);

的问题是高度似乎是太大了： http://i.imgur.com/WI0jGH2.png 我怎么会通过这样的方式正好适合屏幕？

第三种方法，但我会尽量避免它，是设置一个固定的大小，让小屏幕滚动页面上。

谢谢！

更新：这是我的jsfiddle： http://i.imgur.com/NRTykLv.png

来源

2013-04-03 Cod1ngFree

你的意思是你的画布高度和宽度比窗口大，反之亦然...... ?? –

不要忘记在通常的HTML文档中有一堆边距。你有没有摆脱这些？ – Zeta

window.screen.width和window.screen.height返回，其中包括所有的酒吧。所以你必须使用window.innerHeight和window.innerWidth屏幕（你在屏幕上看到evrything）的宽度和高度为了得到视口的高度和宽度

替换

window.initHeight = window.screen.height; 
window.initWidth = window.screen.width;

与

window.initHeight = window.innerHeight; 
window.initWidth = window.innerWidth;

来源

2013-04-03 11:49:22

感谢Prasath K，但它似乎还不够： http://i.imgur.com/NRTykLv.png 侧边栏显示它不适合它。这是我的JSFiddle： http://jsfiddle.net/na75d/1/ 正如Zeta指出的那样，我摆脱了任何无用的空间。我究竟做错了什么？ – Cod1ngFree

这是因为滚动条的宽度和高度..我已经尝试了一切，但无法修复它..尝试设置像溢出一样的身体样式：隐藏;看看它是否合适fr –

嗨Prasath K，它适用于宽度，但不适用于高度。我会为此，但同时我会减去7px的高度。感谢所有。 – Cod1ngFree

调整画布大小

回答

相关问题