Canvas è allungata quando si utilizzano i CSS ma normale con "width"/proprietà "height"

Question

Ho 2 tele, uno utilizza gli attributi HTML width e height a misura di esso, l'altro usa CSS:

<canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas> 
<canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas> 

display Compteur1 come dovrebbe, ma non compteur2. Il contenuto viene disegnato utilizzando JavaScript su una tela 300x300.

Perché c'è una differenza di visualizzazione?

Answer 1

Sembra che le width e height attributi determinano la larghezza o altezza delle tele di sistema di coordinate, mentre le proprietà CSS soltanto a determinare la dimensione della scatola in cui sarà mostrato.

Questo è spiegato in http://www.whatwg.org/html#attr-canvas-width (ha bisogno di JS) o http://www.whatwg.org/c#attr-canvas-width (probabilmente mangiare il vostro computer):

L'elemento canvas ha due attributi per controllare le dimensioni del bitmap dell'elemento: width e height. Questi attributi, quando specificato, devono avere valori che sono numeri interi non negativi validi. Le regole per l'analisi di numeri interi non negativi devono essere utilizzate per ottenere i loro valori numerici. Se manca un attributo o se l'analisi del suo valore restituisce un errore, è necessario utilizzare il valore predefinito. I width degli attributi di default a 300, e le height default attribuire a 150.

Answer 2

Per impostare la width e height è necessario, è possibile utilizzare

canvasObject.setAttribute('width', '475'); 

Answer 3

La tela verrà allungato se si imposta la larghezza e altezza nel tuo CSS. Se si desidera modificare dinamicamente la dimensione della tela è necessario utilizzare JavaScript in questo modo:

canvas = document.getElementById('canv'); 
canvas.setAttribute('width', '438'); 
canvas.setAttribute('height', '462'); 

Answer 4

Per <canvas> elementi, le regole CSS per width e height impostare la dimensione effettiva dell'elemento canvas che verrà utilizzata per la pagina. D'altra parte, gli attributi HTML di width e height impostano la dimensione del sistema di coordinate o "griglia" che verrà utilizzata dall'API Canvas.

Ad esempio, si consideri questo (jsfiddle):

var ctx = document.getElementById('canvas1').getContext('2d'); 
 
ctx.fillStyle = "red"; 
 
ctx.fillRect(10, 10, 30, 30); 
 

 
var ctx2 = document.getElementById('canvas2').getContext('2d'); 
 
ctx2.fillStyle = "red"; 
 
ctx2.fillRect(10, 10, 30, 30);

canvas { 
 
    border: 1px solid black; 
 
}

<canvas id="canvas1" style="width: 50px; height: 100px;" height="50" width="100"></canvas> 
 
<canvas id="canvas2" style="width: 100px; height: 100px;" height="50" width="100"></canvas>

Entrambi hanno avuto la stessa cosa disegnata sopra una relativa alle coordinate interne dell'elemento tela. Ma nella seconda tela, il rettangolo rosso sarà due volte più largo perché la tela nel suo complesso viene allungata su una superficie più grande dalle regole CSS.

Nota: Se le regole CSS per width e/o height non vengono specificati il ​​browser utilizzerà il attributi HTML a misura l'elemento in modo tale che 1 unità di questi valori è uguale 1px sulla pagina.Se questi attributi non sono specificati, verranno impostati su un valore width di 300 e uno height di 150.

Answer 5

Il browser utilizza la larghezza e l'altezza del css, ma l'elemento di disegno viene ridimensionato in base alla larghezza e all'altezza della tela. In javascript, leggi la larghezza e l'altezza del css e imposta la larghezza e l'altezza della tela.

var myCanvas = $('#TheMainCanvas'); 
myCanvas[0].width = myCanvas.width(); 
myCanvas[0].height = myCanvas.height(); 

Answer 6

Shannimal correzione

var el = $('#mycanvas'); 
el.attr('width', parseInt(el.css('width'))) 
el.attr('height', parseInt(el.css('height'))) 

Answer 7

Se si desidera un comportamento dinamico sulla base, ad esempio, Query multimediali CSS, non utilizzare gli attributi larghezza e altezza della tela. Utilizzare le regole CSS e poi, prima di ottenere il contesto di rendering tela, assegnare attributi width e height i CSS di larghezza e altezza stili:

var elem = document.getElementById("mycanvas"); 

elem.width = elem.style.width; 
elem.height = elem.style.height; 

var ctx1 = elem.getContext("2d"); 
...