調整畫布大小

我試圖設計一個使用彈性盒的網頁，以便適合任何類型的屏幕大小。我的主屏幕有一個畫布，所以......這是在初始化過程中調整畫布大小的最佳方式？調整畫布大小

我已經嘗試了這兩種方法。我的第一個方法是使用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

調整畫布大小

回答

相關問題