2011-10-17 1 views
14

Chrome sembra impostare i tag canvas su una larghezza predefinita di 300 px.dimensioni predefinite canvas

Questo è un po 'fastidioso quando voglio una tela di default per la dimensione di esso è div, che ha una dimensione non specificato.

Utilizzando l'esempio here, mi piacerebbe che l'area di disegno assomigli alla larghezza dell'intestazione con il riempimento aggiunto.

Spero che abbia senso.

È possibile senza javascript?

risposta

10

Disponi il tuo layout in modo tale che sia presente un div e che il lavoro di quel div solo sia dettato e sia la dimensione desiderata per il canvas.

var canvas = document.createElement('canvas'); 
canvas.width = div.clientWidth; 
canvas.height = div.clientHeight; 

Quindi aggiungere la tela al div.

+0

Questa è la risposta ovvia, tuttavia il mio problema è che il tag canvas è stato generato lato server - non è stato creato lato client. Questa cattiva pratica? – Finnnn

+0

Non dovrebbe esserci nulla di sbagliato nell'impostazione della larghezza e dell'altezza della tela non appena si riesce a utilizzare la stessa tecnica. Mozilla Bespin controllava costantemente per vedere se il div cambiava taglia e quindi (re) impostava la tela di conseguenza. –

+1

Suppongo che sto cercando di assicurarmi che il layout sia a posto se l'utente ha disabilitato il javascript. Completamente evitando l'uso di javascript per lo stile del layout iniziale. Sembra che questo non sia possibile, il che sembra una seria limitazione del tag canvas. Ancora una volta, potrei fare qualcosa di sbagliato/usare cattive pratiche. – Finnnn

19

Finnnn, hai ragione.

Da specifiche HTML5, http://www.w3.org/TR/2012/WD-html5-author-20120329/the-canvas-element.html#the-canvas-element

L'elemento tela ha due attributi per controllare la dimensione dello spazio di coordinate: larghezza e altezza.

Questi attributi, quando specificato, devono avere valori che sono numeri interi non negativi validi.

La larghezza attributo default , e attribuiscono l'altezza default .

+1

http://www.w3.org/TR/2012/WD-html5-author-20120329/the-canvas-element.html#attr-canvas-width –

1

Posso confermare che in Chrome, la dimensione predefinita è 300 x 150 px.