javascript - 调整 Canvas 大小

Question

我正在尝试使用 flex-boxes 设计一个 web 以适应任何类型的屏幕尺寸。我的主屏幕有一个 Canvas ，所以...在初始化期间调整 Canvas 大小的最佳方式是什么？

这两种方式我都试过了。我的第一种方法是使用 CSS 并为其大小设置一个百分比。例如，宽度=100% 和高度=100%。尽管设计有效，但我发现在使用 Canvas 坐标时存在很多问题。例如，当拖动一个元素时，我的鼠标坐标放大了十倍左右。尽管我可以做到这一点，但我认为这不是最好的方法。

第二种方法是在触发 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 才能获得视口(viewport)的高度和宽度

替换

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

与

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