Question

我想要一个响应式页面，其中包含div中的canvas元素。我应该能够简单地将canvas元素包装在另一个块元素中，并为该画布赋予相对宽度。虽然这种方法适用于Chrome，Firefox，Safari和Opera，但当然IE必须是美中不足！我甚至没有尝试比IE9更旧的版本 - 这个简单的代码示例在IE9中无法正常工作：

<!DOCTYPE html>
<html lang="en-US">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Test IE9 Canvas Height</title>
        <style>
            body {
                margin: 0;
                padding: 0;
            }
            #container {
                position: relative;
                padding-top: 32%;
                background-color: #88f;
            }
            .instruments {
                position: absolute;
                bottom: 0%;
                width: 100%;
                padding-bottom: 16%;
                background-color: #8f8;
            }
            #circle {
                position: absolute;
                left: 42%;
                width: 16%;
            }
        </style>
    </head>

    <body>
        <div id="container">
            <div class="instruments">
                <canvas id="circle"></canvas>
            </div>
        </div>
        <script>
            var canvas = document.getElementById("circle");
            var ctx = canvas.getContext("2d");

            // Default canvas is 300x150, so make it square
            canvas.height = canvas.width;

            ctx.beginPath();
            ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, 0, 2 * Math.PI);
            ctx.fillStyle = "red";
            ctx.fill();
        </script>
    </body>

</html>

这个简单的页面应该渲染一个高度为身体宽度32％的蓝色块，然后让另一个绿色块与底部1/2重叠。内部div内部是一个canvas元素，它没有明确地设置高度和宽度 - 因此它可以保持各种窗口/体宽的流动性。画布应绘制一个圆形的红色圆圈，其高度完全包含在其包含的div中。除了IE9之外的所有其他浏览器都能很好地工作（我认为除了IE10之外）。

即使我指定了画布大小，

<canvas id="circle" width="300" height="300"></canvas>

它仍然不起作用。

我做错了什么，或者有更好的方法来实现这个目标？我不想样式或代码像素或点大小，并且宁愿避免使用javascript IE hack。谢谢

Answer 1

老实说，你关于IE 再次的语气让我不想再那么帮助你了。下次拨打它。

你的行为有点未定义，因为canvas的本质是“拉伸”他们的内容，你的代码中没有任何内容保留你的canvas方，所以没有理由让它平均缩放。 ..你可以通过给画布一个背景颜色来自己看到......短版本是添加：

height: 100%

到canvas'css以使其按照您希望的方式工作...希望这有助于确认

<强>更新

我看了你的评论，你似乎不明白设置canvas.width和canvas.height只会改变元素内部“绘图表面”的大小。设置元素的样式（默认为auto）时，您将设置显示表面的尺寸。您遇到的问题是，当其中一个样式维度成员设置为canvas而另一个未设置为auto时，您希望浏览器保留img的内部维度，就像它的工作方式一样带有300px标记。 Chrome＆amp; Firefox似乎表现得这样。然而，IE只是让您的实际尺寸通过，所以在您的情况下，就好像您将高度设置为img。我不确定是否有一个“规范正确”的方法，但似乎所有的实现都融合在你喜欢的行为上。

无论如何，问题的解决方案是使用<!DOCTYPE html> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Test IE9 Canvas Height</title> <style> body { margin: 0; padding: 0; } #container { position: relative; padding-top: 32%; background-color: #88f; } .instruments { position: absolute; bottom: 0%; width: 100%; padding-bottom: 16%; background-color: #8f8; } #circle { position: absolute; left: 42%; width: 16%; } </style> </head> <body> <div id="container"> <div class="instruments"> <img id="circle" src=""/> </div> </div> <script> var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); // Default canvas is 300x150, so make it square canvas.height = canvas.width = 300; ctx.beginPath(); ctx.arc(canvas.width/2, canvas.height/2, canvas.width/2, 0, 2 * Math.PI); ctx.fillStyle = "red"; ctx.fill(); var img = document.getElementById('circle'); img.src = canvas.toDataURL(); </script> </body> </html>标记，因为该标记行为正确，只需使用数据uri将画布图像放入其中：

<style>
    html, body {
      margin: 0;
      padding: 0;
      height:100%;
    }

    #container {
      height: 33%;
      background-color: #88f;
    }

    .instruments {
      height:50%;
      background-color: #8f8;
      position:relative;
      top:50%;
    }

    #circle {
      display:block;
      margin:auto;
      width:auto;
      height:100%;
    }
</style>

这将为您提供您正在寻找的效果，而无需任何进一步的黑客......

另一方面，使用填充来“缩放”具有百分比的元素的css技术有点脆弱（就像所有基于％的css技术一样）。如果我使用基于％的css布局，我可能会使用这样的东西：

{{1}}

你可以在这里看到完整的东西（修改过的css）：http://jsbin.com/ajoTUZA/2/quiet

我希望这有助于确定

如何在IE9中实现响应式画布高度

1 个答案: