缩放 HTML5 画布宽度保留 w/h 纵横比
Posted
技术标签:
【中文标题】缩放 HTML5 画布宽度保留 w/h 纵横比【英文标题】：Scaling HTML5 canvas width preserving w/h aspect ratio 【发布时间】：2012-05-31 18:47:25 【问题描述】：我有一个尺寸为 979X482px 的画布元素，我想让它拉伸以适应任何给定浏览器窗口的宽度，保持宽度/高度的纵横比为 1 比 1，我希望高度相对缩放到画布的宽度。关于如何使用 javascript/jQuery 执行此操作的任何建议？
【问题讨论】：
计算新的宽度和高度并通过 jquery/javascript 应用它们。有大量关于如何计算尺寸保持比例的信息。你自己尝试过什么吗？可能是您遇到问题的一些代码？ 【参考方案1】： ctx.canvas.width = window.innerWidth;
ctx.canvas.height = 3*window.innerWidth/4;
或一些变体。 ctx 是上下文。边缘情况的 if 语句可能是必要的！
【讨论】：
【参考方案2】：首先将画布的宽度设置为 100%
$('#canvas').css('width', '100%');
然后根据它的宽度更新它的高度
$(window).resize(function()
$('#canvas').height($('#canvas').width() / 2.031);
);
2.031 = 979/482
但你不应该像我一样附加到 $(window).resize ......这是一种不好的行为
【讨论】：
谢谢你，但我似乎无法让它工作。$('#canvas').height($('canvas').width() / 2.031); 应该是 $('#canvas').height($('#canvas').width() / 2.031);，注意 ID 吗？
是的，我忘了放#canvas
这会导致内容模糊。您需要按照其他答案状态来操作画布上下文。
您应该设置画布元素的高度/宽度属性而不是 CSS 属性并重绘画布。
如何在响应式画布上缩放图像？【参考方案3】：
以前的所有答案都很棒，但它们不会按比例缩放画布上绘制的所有图像与新画布大小。如果你使用动力学，我在这里做了一个函数 = http://www.andy-howard.com/how-to-resize-kinetic-canvas-and-maintain-the-aspect-ratio/
【讨论】：
【参考方案4】：我自己也在玩这个。这个概念围绕着了解画布的宽度。您还需要确保所有画布资产也使用计算来发布依赖于浏览器的内容。我记录了我的代码，希望对您有所帮助，
<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>
【讨论】：
【参考方案5】：试试这个
$('#canvas').css('width', $(window).width());
$('#canvas').css('height', $(window).height());
【讨论】：
这不会设置比例，它只是将画布大小设置为窗口宽度和窗口高度。以上是关于缩放 HTML5 画布宽度保留 w/h 纵横比的主要内容，如果未能解决你的问题，请参考以下文章