可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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?

回答1:

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

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

回答2:

 ctx.canvas.width = window.innerWidth;

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

or some variation of that. ctx is the context. An if statement for edge cases might be necessary!

回答3:

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/

回答4:

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 = window.innerWidth;

</script>

</body>

回答5:

Try this

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

Scaling HTML5 canvas width preserving w/h aspect r

问题:

回答1:

回答2:

回答3:

回答4:

回答5:

收藏的人(0)

Scaling HTML5 canvas width preserving w/h aspect r

问题:

回答1:

回答2:

回答3:

回答4:

回答5:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮