3

我想要一个在 div 中包含画布元素的响应式页面。我应该能够简单地将一个画布元素包裹在另一个块元素中，并给该画布一个相对宽度。虽然这种方法适用于 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 内部是一个画布元素，它没有明确设置高度和宽度——因此它可以在各种窗口/主体宽度下保持流畅。画布应绘制一个红色圆形，高度完全包含在其包含的 div 中。在除 IE9 之外的所有其他浏览器（我认为也除 IE10 之外）中都能很好地工作。

即使我确实指定了画布大小，

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

它仍然不起作用。

我做错了什么，还是有更好的方法来实现这个目标？我不想设置像素或点大小的样式或编码，并且更愿意避免 javascript IE hack。谢谢

4

1 回答 1

1

老实说，你关于 IE再次变坏的语气让我不想帮助你那么多。下次打掉。

您在这里的行为有点不确定，因为canvas本质是“拉伸”它们的内容，并且您的代码中没有任何内容保持您的canvas正方形，因此没有理由让它均匀缩放...您可以通过给画布一个背景颜色...简短版本添加：

height: 100%

到canvas'css，让它按照你想要的方式工作......希望这会有所帮助-ck

更新：

我阅读了您的评论，您似乎不明白设置canvas.widthandcanvas.height只会改变元素内部“绘图表面”的大小。当您设置元素的样式（默认为auto）时，您正在设置显示表面的尺寸。您遇到的问题是，您希望浏览器canvas在其中一个样式维度成员设置为auto而另一个未设置时保留 s 内部维度，就像它如何与img标签一起使用一样。Chrome 和 Firefox 似乎就是这样。然而，IE 只是让您的实际尺寸通过，所以在您的情况下，就好像您将高度设置为300px. 我不确定是否存在“规范正确”的方法，但似乎所有实现都在收敛于您的首选行为。

无论如何，您的问题的解决方案是使用img标签，因为该标签将正常运行，并且只需使用数据 uri 将您的画布图像放入其中：

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

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

在旁注中，您使用填充以百分比“调整”元素的 css 技术有点脆弱（就像所有基于 % 的 css 技术一样）。如果我使用基于 % 的 css 布局，我可能会使用如下内容：

<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）：http: //jsbin.com/ajoTUZA/2/quiet

我希望这会有所帮助-ck

于 2013-08-26T20:37:58.820 回答