Javascript 如何将HTML5画布缩放到包装它的容器的大小？

目前我有一个固定大小的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实现，我只是不知道怎么做。。。 我希望我已经提供了足够的信息来帮助我。如果有人能够设计出一个JSFIDLE并提供一些示例代码（如果可能的话），我们将不胜感激

---

谢谢。

这里有一个基本的实现，可以保持纵横比：

注意，它只是水平的流体

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设置宽度/高度，它会拉伸/挤压像素的图形，你会得到模糊的图形。

这正是我想要的，现在就试着让它工作。干杯，伙计。有了jQuery，代码变得更简单了，但我写这篇文章时，标签不在那里PDo您介意用Jquery完成吗？@Ryan大致相同，除了不使用

offsetWidth

之外，我们可以使用Jquery的

width

或

outerWidth

，这在不同的浏览器中是一致的。

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);
}