Question

我正在尝试通过javascript制作画布全屏。

虽然在firefox中它可以正常工作，但在Chrome中却没有。

这就是我的所作所为：

document.addEventListener('webkitfullscreenchange', function(e) {
    var canv = gamvas.getCanvas();
    if (canv) {
        if (document.webkitIsFullScreen) {
            gamvas._isFullScreen = true;
            canv.style.width=screen.width+'px';
            canv.style.height=screen.height+'px';
        } else {
            gamvas._isFullScreen = false;
            canv.style.width=canv.width+'px';
            canv.style.height=canv.height+'px';
        }
    }
}, false);

然后，当我使用canvas.webkitRequestFullscreen（）调用上面的代码时，它具有正确的screen.width / height桌面，但似乎结果是缩放的。因此，浏览器设置的屏幕模式少于桌面，或者它会使画布升级。结果是画布与屏幕不匹配，部分流过右下屏幕边框。

我尝试使用-webkit-full-screen css达到100％，但是虽然它适用于垂直尺寸，但它仍然在水平尺寸上关闭

Answer 1

这是一个已向Chromium团队报告的错误。您可以在http://code.google.com/p/chromium/issues/detail?id=138368

上关注此问题

Answer 2

试试这个

#canvas:-webkit-full-screen {
width: 100%;
height: 100%;
}
#canvas:-moz-full-screen {
width: 100%;
height: 100%;
}

画布上的Webkit JavaScript Fullscreen不起作用

2 个答案: