Javascript 缩放 HTML5 画布宽度保留 w/h 纵横比
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10750125/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scaling HTML5 canvas width preserving w/h aspect ratio
提问by dcd0181
I have a canvas element with dimensions of 979X482px and I'd like to have it stretch to fit the width of any given browser window, keeping the aspect ratio of width/hight 1 to 1, I want the height to scale relative to width of the canvas. Any suggestions as how to go about doing this with javascript/jQuery?
我有一个尺寸为 979X482px 的画布元素，我想让它拉伸以适应任何给定浏览器窗口的宽度，保持宽度/高度的纵横比 1 比 1，我希望高度相对于宽度进行缩放画布。关于如何使用 javascript/jQuery 执行此操作的任何建议？
采纳答案by Trinh Hoang Nhu
First you set the width of canvas to 100%
首先将画布的宽度设置为 100%
$('#canvas').css('width', '100%');
then update its height base on its width
然后根据其宽度更新其高度
$(window).resize(function(){
$('#canvas').height($('#canvas').width() / 2.031);
});
2.031 = 979/482
2.031 = 979/482
But you should not attach to $(window).resize like me... it's a bad behavior
但是你不应该像我一样附加到 $(window).resize ......这是一种不好的行为
回答by
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = 3*window.innerWidth/4;
or some variation of that. ctxis the context. An if statement for edge cases might be necessary!
或者它的一些变体。ctx是上下文。可能需要用于边缘情况的 if 语句！
回答by Andrew Junior Howard
All the previous answers are great, but they won't scale all the images drawn on the canvas proportionally with the new canvas size. If you're using kinetic, I've made a function here = http://www.andy-howard.com/how-to-resize-kinetic-canvas-and-maintain-the-aspect-ratio/
以前的所有答案都很棒，但它们不会根据新的画布大小按比例缩放画布上绘制的所有图像。如果您使用的是动力学，我在这里做了一个函数 = http://www.andy-howard.com/how-to-resize-kinetic-canvas-and-maintain-the-aspect-ratio/
回答by Sabba Keynejad
I was playing around with this for a while myself. The concept revolves around knowing the width of the canvas. You also need to make sure all your canvas assets also use calculations to for posting dependent on the browser with. I documented my code, I hope it helps,
我自己玩了一段时间。这个概念围绕着了解画布的宽度展开。你还需要确保你的所有画布资产也使用计算来发布依赖于浏览器。我记录了我的代码，希望它有所帮助，
<body>
// in style make your canvas 100% width and hight, this will not flex for all browsers sizes.
<style>
canvas{
width: 100%;
height:100%;
position: relative;
}
</style>
<canvas id="myCanvas"></canvas>
<script>
// here we are just getting the canvas and asigning it the to the vairable context
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// no we get with of content and asign the same hight as the with. this gives up aspect ration 1:1.
context.canvas.width = window.innerWidth;
context.canvas.height = window.innerWidth;
// If you want aspect ration 4:3 uncomment the line below.
//context.canvas.height = 3 * window.innerWidth / 4;
</script>
</body>
回答by mehmood
Try this
尝试这个
$('#canvas').css('width', $(window).width());
$('#canvas').css('height', $(window).height());
