如何将HTML5画布缩放到包装它的容器的大小？
提问于 2012-10-03 20:41:34
目前我有一个固定大小的HTML5画布，如下所示：
<div class="container">
<canvas id="example" width="350" height="250"></canvas>
</div>然而，我希望能够缩放画布，使其与周围的容器大小相同，显然它仍然必须保持相同的纵横比。我还希望它是流体的，这样如果用户调整浏览器的大小，那么画布就会随着流体容器的缩放而缩放。
因此，例如，如果我的容器宽度设置为500px，那么画布的宽度将缩放到相同的大小。例如：
<div class="container" style="width:500px;">
<canvas id="example"></canvas>
</div>例如，画布的宽度将为500px以匹配容器，高度将自动设置为357px，保持相同的纵横比。
我相信这可以用一些javascript来实现，我只是不知道怎么做……我希望我已经为别人提供了足够的信息来帮助我。如果有人能提出一个jsfiddle，并提供一些示例代码，如果可能的话，我将不胜感激。
谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-10-03 20:56:19
下面是一个保持纵横比的基本实现：http://jsfiddle.net/wtVX2/1/
function resizeCanvas(){
var con = document.getElementById("container"),
canvas = document.getElementById("canvas"),
aspect = canvas.height/canvas.width,
width = con.offsetWidth,
height = con.offsetHeight;
canvas.width = width;
canvas.height = Math.round(width * aspect);
}注意，它只在水平方向上是流动的。
jQuery将为：
function resizeCanvas(){
var con = $("#container"),
canvas = $("#canvas")[0],
aspect = canvas.height/canvas.width,
width = con.width(),
height = con.height();
canvas.width = width;
canvas.height = Math.round(width * aspect);
}请注意，我仍然以相同的方式设置画布的宽度和高度。如果我们使用CSS设置宽度/高度，它将拉伸/挤压像素的绘图，您将得到模糊的绘图。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12716565
复制相关文章
腾讯云开发者
