画布最大化错误？

发布于 2024-08-30 21:08:03 字数 868 浏览 8 评论 0原文

我肯定已经因为 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% 宽的画布中。 high 绝对定位的 div，以及提取 document.documentElement.clientWidth/Height 属性。

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

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

原文

I must've killed over an hour on what seems to me like strange behaviour that happens in Firefox, Safari and Chrome. Here is some code:

<!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>

Basically, the canvas always seems to maximize 'too much', and the window grows scrollbars on both sides. I've tried using various ways of obtaining the document dimensions, including nesting canvas in a 100% wide & tall absolutely positioned div, as well as extracting the document.documentElement.clientWidth/Height properties.

Just to be sure I'm not going insane, I've placed an image in place of the canvas, and voila, the same code worked perfectly to stretch the image out to document dimensions.

What am I doing wrong here? I'm too tired to understand. Must.. drink.. something.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

难以启齿的温柔 2024-09-06 21:08:03

如果您正在寻找一种方法来扩展画布以覆盖整个页面，我发现的最佳解决方案是让 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>

If you are looking for a way to extend the canvas to cover the whole page, the best solution I found is to let CSS automatically resize it to 100%, then use the current canvas element size to reset the canvas resolution.
In order to avoid having scrollbars you must also set the canvas CSS position to absolute.

(tested with 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>

回复收藏 0 原文

一指流沙 2024-09-06 21:08:03

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

回复收藏 0 原文

像你 2024-09-06 21:08:03

嗯，这在 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 才能使代码正常工作。

这就是原因：（在脚本标记的 type 属性的 javascript MIME 类型是什么？)

JavaScript 的 MIME 类型不是
标准化多年。现在是
正式名称：“application/javascript”。
这里真正的问题是大多数
浏览器不会使用该属性
无论如何，至少在以下情况下不是
脚本标签。他们实际上偷看
在数据包内并确定
自己输入。
所以底线是
type="text/javascript" 不行
就 JavaScript 而言，任何内容都可以
担心，但这是规范的一部分
适用于 HTML 4 和 XHTML 1.0。

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

Well, this works in Firefox 4, but I haven't tried in other browsers because I don't have them in this computer.

<!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>

As for IE7 (which doesn't support canvas anyway), I had to change your script's type attribute from application/javascript to text/javascript to make the code work.

This is why: (quoting keparo on What is the javascript MIME type for the type attribute of a script tag?)

The MIME type for javascript wasn't
standardized for years. It's now
officially: "application/javascript".
The real kicker here is that most
browsers won't use that attribute
anyway, at least not in the case of
the script tag. They actually peek
inside the packet and determine the
type for themselves.
So the bottom line is that the
type="text/javascript" doesn't do
anything as far as the javascript is
concerned, but it's part of the spec
for both HTML 4 and XHTML 1.0.

I don't know if this still stands for more recent versions of IE.

回复收藏 0 原文

~没有更多了~