調整畫布大小

Question

我正在嘗試使用彈性框設計網站，以使其適合任何屏幕尺寸。 我的主屏幕上有一個畫布，所以...在初始化時調整畫布大小的最佳方法是什么？

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

Answer 1

window.screen.width和window.screen.height返回包含所有條的屏幕的寬度和高度（在屏幕上看到的所有東西）。因此，必須使用window.innerHeight和window.innerWidth才能獲得視圖端口高度和寬度

更換

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

與

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