尝试将HTMLcanvas扩展到整个页面，但jQuerywidth()和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);
也尝试了Javascriptwindow.innerheight和window.innerWidth，但这也会产生滚动条。
默认浏览器样式表可能会给<body>元素一个边距。因为画布位于正文中，这将使画布大于其父级，从而创建可滚动的视图。
如果希望画布跨越窗口的宽度，请通过 CSS 从正文元素中删除边距和填充。您可以使用内联样式来验证这一点：<body style="margin:0 padding:0">(尽管通常最佳做法是将样式放在离散文件中或至少放在 html 标头中(。
或者，如果您希望画布跨越正文，请使用以下内容：
var vp_width = $('body').innerWidth;
var vp_height = $('body').innerHeight;