Масштабирование ширины холста HTML5 с сохранением соотношения сторон w/h

У меня есть элемент canvas с размерами 979X482px, и я хотел бы, чтобы он растягивался, чтобы соответствовать ширине любого данного окна браузера, сохраняя соотношение сторон ширины/высоты 1 к 1, я хочу, чтобы высота масштабировалась относительно ширины холста. Любые предложения о том, как это сделать с javascript/jQuery?

8
aspect-ratio html5-canvas javascript

5 ответов

сначала вы устанавливаете ширину холста на 100%

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

затем обновите его основание высоты по его ширине

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

2.031 = 979/482

но вы не должны присоединяться к $(window).как и я... это плохое поведение

3
 ctx.canvas.width = window.innerWidth;

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

или какая-то вариация этого. ctx контекст. Оператор if для крайних случаев может потребоваться!

10

все предыдущие ответы хороши, но они не масштабировать все изображения, нарисованные на холсте пропорционально новому размеру холста. Если вы используете kinetic, я сделал функцию здесь = http://www.andy-howard.com/how-to-resize-kinetic-canvas-and-maintain-the-aspect-ratio/

1

Я сам некоторое время играл с этим. Концепция вращается вокруг знания ширины холста. Вам также необходимо убедиться, что все ваши активы холста также используют вычисления для разноски в зависимости от браузера. Я задокументировал свой код, надеюсь, это поможет,

<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>
0

попробуй такое 

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