Tengo un elemento de lienzo con unas dimensiones de 979X482px y me gustaría que se estire para adaptarse al ancho de cualquier ventana de navegador determinada, manteniendo la relación de aspecto de ancho/alto 1 a 1, quiero que la altura se escale en relación con el ancho del lienzo. ¿Alguna sugerencia sobre cómo hacer esto con javascript/jQuery?Escala de ancho de lienzo HTML5 conservando relación de aspecto w/h
En primer lugar, establecer el ancho de la tela 100%
$('#canvas').css('width', '100%');
luego actualizar su base de altura en su anchura
$(window).resize(function(){
$('#canvas').height($('#canvas').width()/2.031);
});
2,031 = 979/482
Pero no se debe adjuntar a $ (ventana) .resize como yo ... es un mal comportamiento
Gracias por esto, pero parece que no puedo hacerlo funcionar. Debe '$ ('# canvas'). Height ($ ('canvas'). Width()/2.031);' be '$ ('# canvas'). Height ($ ('# canvas'). Width()/2.031); ', tomando nota de la ID? – dcd0181
Sí, olvidé poner el #canvas –
Esto causará que el contenido se vea borroso. Necesita manipular el contexto del lienzo como los otros estados de respuesta. – cyberwombat
Probar este
$('#canvas').css('width', $(window).width());
$('#canvas').css('height', $(window).height());
No es mantener la proporción –
Esto NO establece la escala, simplemente establece el tamaño de la lona para el ancho de la ventana y la altura de la ventana. – shadryck
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = 3*window.innerWidth/4;
o alguna variación de eso. ctx es el contexto. ¡Una declaración if para casos límite podría ser necesaria!
Todas las respuestas anteriores son geniales, pero no escalarán proporcionalmente todas las imágenes dibujadas en el lienzo con el nuevo tamaño de lienzo. Si está utilizando cinética, he hecho una función aquí = http://www.andy-howard.com/how-to-resize-kinetic-canvas-and-maintain-the-aspect-ratio/
Estuve jugando con esto un tiempo yo mismo. El concepto gira en torno al conocimiento del ancho del lienzo. También debe asegurarse de que todos sus activos canvas también utilicen cálculos para la publicación dependiente del navegador. Documenté mi código, espero que ayude,
<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>
Calcule el nuevo ancho y alto y aplíquelos a través de jquery/javascript. Hay toneladas de información sobre cómo calcificar dimensiones manteniendo proporciones. ¿Has probado algo tú mismo? ¿Algún código con el que estás teniendo problemas, tal vez? – Yoshi