javascript - Canvas 切换填充整个页面删除滚动条

Question

我的页面上有一个 Canvas ，我想切换它填充页面和向后填充。我的页面通常比屏幕高度“高”，所以我的页面上有一个滚动条。当我像在我的 css 中那样设置 Canvas 大小时，此滚动条不会隐藏:

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/

当 Canvas 处于“全屏”模式时，我真的不知道如何删除滚动条。感谢您的帮助!

谢谢!帕西姆

Answer 1

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

<canvas>如果不设置为 display:block 将导致滚动条.

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