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

Scaling HTML5 canvas width preserving w/h aspect ratio(缩放 HTML5 画布宽度保留 w/h 纵横比)

问题描述

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

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?

推荐答案

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

First you set the width of canvas to 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

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

But you should not attach to $(window).resize like me... it's a bad behavior

这篇关于缩放 HTML5 画布宽度保留 w/h 纵横比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！