3

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

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

有没有跨浏览器的方法来做到这一点？

4

2 回答 2

4

在 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>

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

于 2013-04-07T22:43:31.787 回答
-1

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

#my_canvas {
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
}
于 2013-04-06T22:49:03.670 回答