Question

我想创建一个包含画布对象的网页，该对象填充屏幕而不创建滚动条。

将画布宽度和高度设置为$（window）.height（）和$（window）.width（）会生成滚动条。将宽度减少几个像素是不可靠的，因为我需要减少的数量因浏览器而异。

是否有跨浏览器方式来执行此操作？

Answer 1

在Chrome中，这对我有用。

<html>
    <head>
        <title></title>
        <script>
           function init() {
                var canvasBG = document.getElementById("test");
                var ctxBG = _canvasBG.getContext("2d");

                canvasBG.style.width = window.innerWidth;
                canvasBG.style.height = window.innerHeight;
            };

            window.onload = init;
        </script>
    </head>
    <body>
        <canvas id="test" style="background:#eeeeee; 
               margin:0; padding:0; 
               position:absolute; 
               top:0; left:0">
        </canvas>
    </body>
    </html>

更新：您可能还想将调整大小侦听器附加到页面，因此如果用户调整页面大小，您可以重置宽度/高度。

Answer 2

支持canvas元素的所有浏览器也支持css固定定位。所以做这样的事情：

#my_canvas {
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
}

在没有滚动条的情况下使画布尽可能大

2 个答案: