Question

可能重复：
HTML5 Canvas resize to fit window

我正在为手机开发HTML5游戏。

我想拉伸画布以获得完整的手机宽度和高度。

我正在使用此代码，但不是很准确：

ourCanvas = document.getElementById('gameCanvas');
context = ourGameCanvas.getContext( '2d' );
ourCanvas.width = $(window).width();
ourCanvas.height = $(window).height();

有什么建议吗？

Answer 1

看起来你的画布在窗口调整大小或orientationchange事件时不会刷新它的宽度和高度：

$(window).on("resize", fitCanvas);
fitCanvas();

function fitCanvas() {
    var ourCanvas = document.getElementById('gameCanvas');
    context = ourGameCanvas.getContext( '2d' );
    ourCanvas.width = $(window).width();
    ourCanvas.height = $(window).height();
}

Answer 2

.outerWidth()
.outerHeight()

你重置了你的布局吗？像：

body, html, p, whatever { padding:0; margin:0; }

移动全屏html

2 个答案: