Javascript 缩放HTML5画布宽度保持w/h纵横比

我有一个尺寸为979X482px的canvas元素，我希望将其拉伸以适合任何给定浏览器窗口的宽度，保持宽高比为1:1，我希望高度相对于canvas的宽度进行缩放。有关于如何使用javascript/jQuery执行此操作的建议吗？

首先将画布宽度设置为100%

$('#canvas').css('width', '100%');

然后根据其宽度更新其高度基准

$(window).resize(function(){
   $('#canvas').height($('#canvas').width() / 2.031);
});

2.031=979/482

但是你不应该附加到$（窗口）。像我一样调整大小。。。这是一种不好的行为

试试这个

$('#canvas').css('width', $(window).width());
$('#canvas').css('height', $(window).height());

---

或者是它的一些变体<代码>ctx是上下文。边缘情况的if语句可能是必需的

前面的所有答案都很好，但它们不会按照新的画布大小按比例缩放画布上绘制的所有图像。如果你用的是动能，我在这里做了一个函数=

我自己也玩了一会儿。这个概念围绕着知道画布的宽度展开。您还需要确保您的所有画布资源也使用计算来进行过帐，具体取决于浏览器。我记录了我的代码，希望能有所帮助

//在样式中，使画布100%宽度和高度，这不会适用于所有浏览器大小。
帆布{
宽度：100%；
身高：100%；
位置：相对位置；
}
//在这里，我们只是得到画布，并把它放在虚幻的上下文中
var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
//不，我们得到的内容和asign相同的高度。这就放弃了1:1的比例。
context.canvas.width=window.innerWidth；
context.canvas.height=window.innerWidth；
//如果您想按比例4:3取消注释下面的行。
//context.canvas.height=3*window.innerWidth/4；

计算新的宽度和高度，并通过jquery/javascript应用它们。关于如何计算尺寸以保持比例，有大量的信息。你自己试过什么吗？也许是一些你遇到问题的代码？谢谢你，但我似乎无法让它工作。应

$（'canvas'）.height（$（'canvas'）.width（）/2.031）

be

$（'画布'）.height（$（'画布'）.width（）/2.031），注意ID？是的，我忘了放#canvast这会导致内容模糊。您需要像其他答案状态一样操作画布上下文。您应该设置画布元素的高度/宽度属性，而不是CSS属性，然后重新绘制画布。在响应画布上缩放图像如何？这并没有设置缩放，它只是将画布大小设置为窗口宽度和窗口高度。
 ctx.canvas.width = window.innerWidth;

 ctx.canvas.height = 3*window.innerWidth/4;