Question

尝试在整个页面上扩展HTML canvas，但jQuery width()和height()函数正在创建垂直和水平滚动条。

HTML

<body>
    <canvas id="bg_canvas" width="" height=""></canvas>
</body>

的jQuery

// Expand canvas to full viewport size
    var vp_width = window.clientWidth;
    var vp_height = window.clientHeight;

    $("#bg_canvas").css({
        "width" : vp_width,
        "height" : vp_height
    });

// Canvas Drawing
    var canvas = document.getElementById("bg_canvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle="#cbf7ed";
    ctx.fillRect(100,100,vp_width,100);

还尝试使用Javascript window.innerheight和window.innerWidth，但这也会创建滚动条。

Answer 1

默认的浏览器样式表可能会为<body>元素提供保证金。因为画布在体内，会使画布比其父画布更大，从而创建一个可滚动的视图。

如果您希望画布跨越窗口的宽度，请通过CSS从body元素中删除margin和padding。您可以使用内联样式验证这一点：<body style="margin:0 padding:0">（尽管通常最好将样式放在离散文件中或至少放在html标题中）。

或者，如果您希望画布跨越身体，请使用以下内容：

var vp_width = $('body').innerWidth;
var vp_height = $('body').innerHeight;

如何在不创建滚动条的情况下获取视口的高度和宽度？

1 个答案: