Centrare una canvas

Come faccio a contrassegnare una pagina con un canvas HTML5 in modo tale che il canvas

  1. Occupa l’80% della larghezza

  2. Ha un’altezza e una larghezza di pixel corrispondenti che definiscono efficacemente il rapporto (e vengono mantenute proporzionalmente quando l’area di lavoro viene allungata all’80%)

  3. È centrato sia verticalmente che orizzontalmente

Puoi presumere che la canvas sia l’unica cosa sulla pagina, ma sentiti libero di incapsularla in div s se necessario.

Questo centrerà la canvas orizzontalmente:

 #canvas-container { width: 100%; text-align:center; } canvas { display: inline; } 

HTML:

 
Your browser doesn't support canvas

Guardando le risposte attuali, sento che manca una soluzione semplice e pulita. Nel caso qualcuno passi e cerchi la soluzione giusta. Ho abbastanza successo con alcuni semplici CSS e javascript.

Centra la canvas al centro dello schermo o dell’elemento principale. Nessun involucro

HTML:

 No canvas support 

CSS:

 #canvas { position: absolute; top:0; bottom: 0; left: 0; right: 0; margin:auto; } 

Javascript:

 window.onload = window.onresize = function() { var canvas = document.getElementById('canvas'); canvas.width = window.innerWidth * 0.8; canvas.height = window.innerHeight * 0.8; } 

Funziona come un fascino: testato: firefox, chrome

fiddle: http://jsfiddle.net/djwave28/j6cffppa/3/

Testato solo su Firefox:

      

per centrare la canvas all’interno della finestra + è necessario aggiungere “px” a el.style.top e el.style.left .

 el.style.top = (viewportHeight - canvasHeight) / 2 +"px"; el.style.left = (viewportWidth - canvasWidth) / 2 +"px"; 

modo più semplice

metti la canvas nei tag di paragrafo come questo:

 

Dato che la canvas non è nulla senza JavaScript, usa anche JavaScript per dimensionare e posizionare (sai: onresize , position:absolute , ecc.)

Ridimensionare la canvas usando css non è una buona idea. Dovrebbe essere fatto usando Javascript. Vedi la funzione qui sotto che lo fa

 function setCanvas(){ var canvasNode = document.getElementById('xCanvas'); var pw = canvasNode.parentNode.clientWidth; var ph = canvasNode.parentNode.clientHeight; canvasNode.height = pw * 0.8 * (canvasNode.height/canvasNode.width); canvasNode.width = pw * 0.8; canvasNode.style.top = (ph-canvasNode.height)/2 + "px"; canvasNode.style.left = (pw-canvasNode.width)/2 + "px"; } 

demo qui: http://jsfiddle.net/9Rmwt/11/show/

.

Stessi codici di Nickolay sopra, ma testati su IE9 e chrome (e rimosso il rendering extra):

 window.onload = window.onresize = function() { var canvas = document.getElementById('canvas'); var viewportWidth = window.innerWidth; var viewportHeight = window.innerHeight; var canvasWidth = viewportWidth * 0.8; var canvasHeight = canvasWidth / 2; canvas.style.position = "absolute"; canvas.setAttribute("width", canvasWidth); canvas.setAttribute("height", canvasHeight); canvas.style.top = (viewportHeight - canvasHeight) / 2 + "px"; canvas.style.left = (viewportWidth - canvasWidth) / 2 + "px"; } 

HTML:

   Canvas is not supported.   

L’offset superiore e sinistro funziona solo quando aggiungo px .

Per quanto riguarda il suggerimento CSS:

 #myCanvas { width: 100%; height: 100%; } 

Secondo lo standard, il CSS non dimensiona il sistema di coordinate del canvas, ma ridimensiona il contenuto. In Chrome, il CSS citato scalerà la canvas su o giù per adattarla al layout del browser. Nel caso tipico in cui il sistema di coordinate è più piccolo delle dimensioni del browser in pixel, questo riduce effettivamente la risoluzione del disegno. Molto probabilmente risulta anche in un disegno non proporzionale.

Avvolgerlo con div dovrebbe funzionare. L’ho provato su Firefox, Chrome su Fedora 13 ( demo ).

 #content { width: 95%; height: 95%; margin: auto; } #myCanvas { width: 100%; height: 100%; border: 1px solid black; } 

E la canvas dovrebbe essere racchiusa nel tag

 
Your browser doesn't support canvas tag

Fammi sapere se funziona. Saluti.

Semplice:

  
Your browser does not support HTML5 Canvas.