我想要一个在 div 中包含 Canvas 元素的响应式页面。我应该能够简单地将一个 Canvas 元素包裹在另一个 block 元素中，并为该 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% 的蓝色 block ，然后有另一个绿色 block 与底部 1/2 重叠。内部 div 内部是一个 Canvas 元素，它没有明确设置高度和宽度——因此它可以在各种窗口/主体宽度下保持流畅。 Canvas 应绘制一个圆形的红色圆圈，高度完全包含在其包含的 div 中。在除 IE9 之外的所有其他浏览器中都能很好地工作(我认为除了 IE10 之外)。
即使我指定了 Canvas 大小，
<canvas id="circle" width="300" height="300"></canvas>
还是不行。
是我做错了什么，还是有更好的方法来实现这个目标？我不想设置像素或点大小的样式或代码，并且更愿意避免 javascript IE hack。谢谢
最佳答案
老实说，您关于 IE 不好的语气又让我不想那么多帮助您。下次再拨。
你在这里的行为有点不确定，因为 canvas 的本质是“拉伸(stretch)”它们的内容，而你的代码中没有任何东西让你的 canvas 保持正方形，所以没有理由让它均匀缩放......你可以通过给 Canvas 一个背景颜色来亲眼看到这个......简短的版本是添加:
height: 100%
到 canvas 的 css 以使其按照您希望的方式工作...希望这对您有所帮助 -ck
更新:
我读了你的评论，你似乎不明白设置 canvas.width 和 canvas.height 只会改变内部“绘图表面”的大小的元素。当您设置元素的样式(默认为 auto)时，您就是在设置显示表面的尺寸。您遇到的问题是，当其中一个样式维度成员设置为 auto 而另一个是时，您希望浏览器保留 canvas 的内部维度不是，就像它如何与 img 标签一起工作一样。 Chrome 和 Firefox 似乎就是这样。然而，IE 只是让您的实际尺寸通过，所以在您的情况下，就好像您将高度设置为 300px。我不确定是否有一个“规范正确”的方法来解决这个问题，但似乎所有的实现都集中在您的首选行为上。
无论如何，您的问题的解决方案是使用 img 标签，因为该标签将正常运行并且只需使用数据 uri 将您的 Canvas 图像放入其中:
<!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
关于css - 如何在 IE9 中实现响应式 Canvas 高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18452154/