1

对于 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% 宽和高的绝对定位 div 中嵌套画布，以及提取 document.documentElement.clientWidth/Height 属性。

为了确保我不会发疯，我在画布上放置了一个图像，瞧，同样的代码可以完美地将图像拉伸到文档尺寸。

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

4

3 回答 3

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>
于 2011-05-28T15:35:06.060 回答
0

我还没有找到解决这个问题的方法（仍然接受反馈），所以现在我在父容器元素上隐藏了溢出，这大致带来了我正在寻找的东西。不过，如果它如此不一致，那就不好了。除非我错过了什么..

于 2010-05-04T05:16:52.757 回答
-1

好吧，这在 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（无论如何都不支持画布），我必须将脚本的 type 属性从更改为application/javascripttotext/javascript以使代码正常工作。

这就是为什么：（引用keparo on What is the javascript MIME type for type attribute of a script tag?）

多年来，javascript 的 MIME 类型没有标准化。它现在是正式的：“应用程序/javascript”。

这里真正的问题是大多数浏览器无论如何都不会使用该属性，至少在 script 标签的情况下不会。他们实际上在数据包内部窥视并为自己确定类型。

所以底线是 type="text/javascript" 就 javascript 而言没有任何作用，但它是 HTML 4 和 XHTML 1.0 规范的一部分。

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

于 2011-05-28T18:55:30.897 回答