如何让画布绘制完全填充浏览器？

Question

如何让画布绘制完全填充浏览器？

3

这是我目前拥有的代码。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
<script>
function draw()
{
    var diagCanvas = document.getElementById("diag-cnvs");

diagCanvas.height=window.innerHeight;
diagCanvas.width=window.innerWidth;

    if (diagCanvas.getContext)
    {
        var ctx = diagCanvas.getContext("2d");
        var h = w = 100;
        var color1 = 'rgba(255,0,0,1)';
        var color2 = 'rgba(255,0,0,.2)';
        var x = y = 0;

        while(y<diagCanvas.height)
        {
            while(x<diagCanvas.width)
            {
                ctx.fillStyle = color2;
                ctx.fillRect( x, y, w, h);

                ctx.fillStyle = color1;
                ctx.lineTo( x, y);
                ctx.lineTo( x+w/2, y);
                ctx.lineTo( x, y+h/2);
                ctx.lineTo( x, y);
                ctx.moveTo( x+w, y);
                ctx.lineTo( x+w, y+h/2);
                ctx.lineTo( x+w/2, y+h);
                ctx.lineTo( x, y+h);
                ctx.fill();
                ctx.closePath();

                x+=w;
            }
            y+=h;
            x=0;
        }
    }
}
$(function() {
    draw();
})
</script>
<style>
    canvas {
    position: absolute;
    top: 0;
    left: 0;
}
</style>
</head>
<body>
<canvas height="100" width="100" id="diag-cnvs"></canvas>
</body>
</html>

我希望保持画布形状的高度和宽度尺寸相同，但是完全填充浏览器100%或者无限重复，就像CSS中background-image的值在x和y轴上重复一样。最终，我想将条纹添加两三种颜色，但由于我刚接触这个编程语言，对这段代码只有模糊的理解。

- micah

4个回答

1

你是把这个画布添加到页面的body元素中吗？另外，你可以尝试一下

位置：绝对；顶部：0像素；左侧：0像素；

- Robbert

当然，这有助于定位小框，但实际上并不能将其扩展到无限的宽度和高度。 - micah

显然，但与高度和宽度为100%相结合，它应该能够正常工作...假设元素直接位于body标签中。如果我错了，请纠正我。 - Robbert

将100％的宽度和高度添加到此方程式中并没有增加任何内容。即使它可以拉伸画布元素，但线条是由JS绘制的。我怀疑我将不得不使用JS进行某种重绘，但我不知道该怎么做以及如何将其添加到上面的代码中。 - micah

0

使用 CSS：

#diag-cnvs{
    position: absolute;
    top:      0px;
    left:     0px;
    right:    0px;
    bottom:   0px;
    width:    100%;
    height:   100%;
}

- Davy Meers

请看这段代码片段： http://pastebin.com/jmuSqvJ3。自从IE6，IE7和IE8不支持画布标签以来，您应该从http://code.google.com/p/explorercanvas/下载explorercanvas.js。我在firefox 3.5.5，chrome 6.0.453.1和windows xp上的IE7上测试了这个片段，它确实有效。如果对您不起作用，请描述一下哪里出了问题，以及您使用的操作系统和浏览器。 - Davy Meers

编辑：我检查了不改变大小的情况，明白你的意思了。我正在寻找如何解决这个问题。 - Davy Meers

我检查了一些东西：画布被拉伸得像你想要的那样。但是绘图结果似乎有所不同。我不知道这是由于画布/浏览器的奇怪行为，还是因为画布绘制代码包含了一些错误的代码。 - Davy Meers

0

这应该是可能的，我已经用Canvas做过了，不过代码在家里，我现在在工作，所以我会尝试一下应该是什么。需要指出的一件事是，如果您希望它保持图像/画布的正确纵横比，则需要使用JavaScript（好吧，我无法弄清楚，有人可以启发我），否则您可以使用纯CSS：

... header (snip) ...
</head>
<body>
    <div id="Page">
        <canvas id="MyCanvas" width="500" height="500"></canvas>
    </div>
</body>
</html>

还有 CSS：

body { width: 100%; height: 100%; }
#Page { position: absolute; top: 0; right: 0; bottom: 0; left: 0 }

#MyCanvas { height: 100%; width: 100%; }

如果那不起作用，请尝试将#MyCanvas更改为

#MyCanvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0 }

我相信是那个问题，我已经解决了，等我下班回家后会再次检查我的代码。

- Sunday Ironfoot

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jakopo87 · Accepted Answer

function draw()
{
    var diagCanvas = document.getElementById("diag-cnvs");

    if(document.documentElement.offsetHeight<window.innerHeight)
           diagCanvas.height = window.innerHeight;
    else
           diagCanvas.width = document.documentElement.offsetHeight;
    diagCanvas.width=document.documentElement.offsetWidth;

    if (diagCanvas.getContext)
    {
        var ctx = diagCanvas.getContext("2d");
        var h = w = 100;
        var color1 = 'rgba(255,0,0,1)';
        var color2 = 'rgba(255,0,0,.2)';
        var x = y = 0;

        while(y<diagCanvas.height)
        {
            while(x<diagCanvas.width)
            {
                ctx.fillStyle = color2;
                ctx.fillRect( x, y, w, h);

                ctx.fillStyle = color1;
                ctx.lineTo( x, y);
                ctx.lineTo( x+w/2, y);
                ctx.lineTo( x, y+h/2);
                ctx.lineTo( x, y);
                ctx.moveTo( x+w, y);
                ctx.lineTo( x+w, y+h/2);
                ctx.lineTo( x+w/2, y+h);
                ctx.lineTo( x, y+h);
                ctx.fill();
                ctx.closePath();

                x+=w;
            }
            y+=h;
            x=0;
        }
    }
}