缩放HTML5画布宽度,保持w/h宽高比

Question

我有一个尺寸为979X482px的画布元素,我想让它拉伸以适应任何给定浏览器窗口的宽度,保持宽高/高宽1的宽高比为1,我希望高度相对于宽度的比例画布.有关如何使用javascript/jQuery执行此操作的任何建议？

Answer 1

 ctx.canvas.width = window.innerWidth;

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

或者一些变化.ctx是上下文.边缘情况的if语句可能是必要的!

Answer 2

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

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

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

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

2.031 = 979/482

但是你不应该像我一样附加到 $(window).resize ......这是一种不好的行为