Ho un elemento canvas con dimensioni di 979X482px e mi piacerebbe averlo allungare per adattarsi alla larghezza di qualsiasi finestra del browser, mantenendo le proporzioni di larghezza/altezza 1 a 1, voglio che l'altezza si riduca rispetto alla larghezza della tela. Qualche suggerimento su come procedere con javascript/jQuery?Ridimensionamento larghezza tela HTML5 preservando le proporzioni w/h
Per prima cosa impostare la larghezza della tela per 100%
$('#canvas').css('width', '100%');
quindi aggiornare la sua base di altezza sulla sua larghezza
$(window).resize(function(){
$('#canvas').height($('#canvas').width()/2.031);
});
2,031 = 979/482
Ma non si dovrebbe applicare a $ (finestra) .resize come me ... è un cattivo comportamento
Grazie per questo, ma non riesco a farlo funzionare. Dovrebbe '$ ('# canvas'). Height ($ ('canvas'). Width()/2.031);' be '$ ('# canvas'). Height ($ ('# canvas'). Width()/2.031); ', notando l'ID? – dcd0181
Sì, ho dimenticato di inserire #canvas –
Ciò renderà il contenuto sfocato. È necessario modificare il contesto di canvas come gli altri stati di risposta. – cyberwombat
Prova questo
$('#canvas').css('width', $(window).width());
$('#canvas').css('height', $(window).height());
Non mantiene il rapporto –
Questo NON imposta la scala, semplicemente imposta la dimensione della tela alla larghezza della finestra e all'altezza della finestra. – shadryck
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = 3*window.innerWidth/4;
o qualche variazione di questo. ctx è il contesto. Potrebbe essere necessaria una dichiarazione if per casi limite!
Tutte le risposte precedenti sono eccezionali, ma non ridimensionano proporzionalmente tutte le immagini disegnate sulla tela con le nuove dimensioni della tela. Se stai usando la cinetica, ho creato una funzione qui = http://www.andy-howard.com/how-to-resize-kinetic-canvas-and-maintain-the-aspect-ratio/
Mi stavo divertendo da un po '. Il concetto ruota attorno alla conoscenza della larghezza della tela. È inoltre necessario assicurarsi che tutte le risorse del canvas utilizzino anche i calcoli per la pubblicazione in base al browser con. Ho documentato il mio codice, spero che sia d'aiuto,
<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>
Calcolare la nuova larghezza e altezza e applicarli tramite jquery/javascript. Ci sono un sacco di informazioni là fuori su come calcolare le dimensioni mantenendo le proporzioni. Hai provato qualcosa da solo? Qualche codice con cui stai avendo problemi, forse? – Yoshi