画布切换填充整个页面删除滚动条

Question

我的页面上有一个画布，想切换它填充页面和向后。我的页面通常“高于”屏幕高度，因此我的页面上有一个滚动条。当我在 css 中设置画布大小时，此滚动条不会隐藏：

canvas {
    display: inline;
    outline: 0;
    margin: 50;
    border: 1px solid #E0E0E0;
}

canvas.fullscreen {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border: none;
    margin: 0;
}

我的 javascript 看起来像这样：

//toggle the fullscreen mode
function fullscreen() {
    if (!fullWindowState) {
        fullWindowState = true;
        //canvas goes full Window
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        canvas.className = "fullscreen"
    } else {
        fullWindowState = false;
        //canvas goes normal
        canvas.width = 820;
        canvas.height = 600;
        canvas.className = "";
    }
}

完整代码也在 github 上，页面在 gh-pages http://patsimm.github.io/mandelight/

当画布处于“全屏”模式时，我真的不知道如何删除滚动条。每一个帮助都值得赞赏！

谢谢！帕西姆

Answer 1

尝试设置overflow为hiddenwhen you in fullWindowState;

//toggle the fullscreen mode
function fullscreen() {
    if (!fullWindowState) {
        fullWindowState = true;
        //canvas goes full Window
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        canvas.className = "fullscreen"

        document.body.scrollTop = 0; // <-- pull the page back up to the top
        document.body.style.overflow = 'hidden'; // <-- relevant addition
    } else {
        fullWindowState = false;
        //canvas goes normal
        canvas.width = 820;
        canvas.height = 600;
        canvas.className = "";

        document.body.style.overflow = 'visible'; // <-- toggle back to normal mode
    }

}

Answer 2

这与宽度<canvas>标签有关。

<canvas>如果未设置为 ，则会导致滚动条display:block。

详细信息：http : //colla.me/bug/show/canvas_cannot_have_exact_size_to_fullscreen