Question

我必须已经杀了一个多小时才能看到我在Firefox，Safari和Chrome中发生的奇怪行为。这是一些代码：

<!doctype html>
<html>
    <head>
        <title>Watch me grow scrollbars!</title>
    </head>
    <body onload="resizeCanvas()">
        <canvas id="canvas"></canvas>
    </body>
</html>

<script type="application/javascript">
    function resizeCanvas() {
        var canvas = document.getElementById("canvas");
        canvas.setAttribute("height", window.innerHeight);
        canvas.setAttribute("width", window.innerWidth);
    }
</script>

基本上，画布总是似乎最大化“太多”，并且窗口两侧都会生成滚动条。我尝试过使用各种方法来获取文档尺寸，包括在100％宽度和100％范围内嵌套画布。高绝对定位的div，以及解压缩document.documentElement.clientWidth / Height属性。

为了确保我不会疯狂，我已经放置了一个图像代替画布，瞧，相同的代码完美地将图像拉伸到文档尺寸。

我在这里做错了什么？我太累了，无法理解。必须......喝点东西。

Answer 1

如果您正在寻找一种扩展画布以覆盖整个页面的方法，我找到的最佳解决方案是让CSS自动将其调整为100％，然后使用当前画布元素大小来重置画布分辨率。登记/> 为了避免使用滚动条，您还必须将画布CSS位置设置为绝对。

（使用Chrome 34，Firefox 27，Explorer 11测试）

<!DOCTYPE html>
<html>
    <body onload="resizeCanvas()" style="margin: 0;">
        <canvas id="canvas" style="position: absolute; width: 100%; height: 100%;"></canvas>
    </body>
</html>

<script type="application/javascript">
    function resizeCanvas() {
        var canvas = document.getElementById("canvas");
        canvas.setAttribute("width", canvas.offsetWidth);
        canvas.setAttribute("height", canvas.offsetHeight);

        // We draw a circle, just to test that it works
        var ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.arc(canvas.offsetWidth/2, canvas.offsetHeight/2, canvas.offsetHeight/2,    0, Math.PI*2, true); 
        ctx.closePath();
        ctx.fill();
    }
</script>

Answer 2

我还没有找到问题的解决方法（仍然可以反馈），所以现在我在父容器元素上隐藏了溢出，这大致带来了我想要的东西。不过，如果这种情况不一致，那就不好了。除非我遗漏了什么......

Answer 3

嗯，这适用于Firefox 4，但我没有尝试过其他浏览器，因为我没有在这台电脑上使用它们。

<!doctype html>
<html>
    <head>
        <title>Watch me grow scrollbars!</title>
<style>
body { margin: 0; padding: 0; }
canvas { width: 100%; height: 100%; border: 0; }
</style>
<script type="text/javascript">
    function resizeCanvas() {
        var canvas = document.getElementById("canvas"),
            ctx = canvas.getContext('2d'),
            height = document.body.clientHeight,
            width = document.body.clientWidth;
        canvas.setAttribute("height", height);
        canvas.setAttribute("width", width);
        ctx.fillStyle = 'rgb(128,128,128)';
        ctx.fillRect(10, 10, width-20, height-20);
    }
</script>
    </head>
    <body onload="resizeCanvas()">
        <canvas id="canvas"></canvas>
    </body>
</html>

对于IE7（无论如何不支持画布），我必须将脚本的类型属性从application/javascript更改为text/javascript以使代码正常工作。

这就是为什么:(在What is the javascript MIME type for the type attribute of a script tag?上引用keparo）

javascript的MIME类型不是   标准化多年。下雪了   官方：“application / javascript”。

这里最真实的踢球者   浏览器不会使用该属性   无论如何，至少不是在这种情况下   脚本标记。他们实际上偷看了   在数据包内部并确定   为自己打字。

所以最重要的是   type =“text / javascript”不行   任何关于JavaScript的东西   有关，但它是规范的一部分   对于HTML 4和XHTML 1.0。

我不知道这是否仍然代表更新版本的IE。

画布最大化错误？

3 个答案: