Html5 disegno su telaImmagine allungato

Question

Ho provato a disegnare un'immagine su tela html5. Il problema è immagine allungato in canvas

load('img_the_scream', 
    'http://www.w3schools.com/tags/img_the_scream.jpg', 
    function(img){ 
     console.log( img.width , img.height); 
     ctx.drawImage(img, 10, 10 , img.width , img.height); 
    } 
); 

ho aggiunto questo problema in http://jsfiddle.net/75rAU/

Answer 1

Questo è perché si è modificato la dimensione della tela in CSS. L'area di disegno ha due dimensioni separate: la dimensione HTML (quella inserita nel tag canvas) e la dimensione css, che è in realtà una ridimensionamento dell'area di disegno. La dimensione HTML è la dimensione che controlli (quando disegni, usa questa dimensione) e la dimensione CSS è la dimensione visualizzata che è un ridimensionamento della dimensione HTML.

Quindi, ecco, la vostra tela è la dimensione predefinita (che non ricordo), ma viene ridimensionato (e allungato) dalla css

HTML:

<canvas id="cv" width="350" height="350"></canvas> 

CSS:

#cv { 
    background:#ff0; 
} 

Qui I updated your fiddle con l'assegnazione di dimensione corretta

Answer 2

Canvas ce l'ha le sue dimensioni 300x150 di default. Gli stili (larghezza/altezza) allungano appena lo canvas come qualsiasi immagine. Quindi, dovresti impostare fortemente le dimensioni per quello che vuoi. Puoi farlo tramite il codice HTML <canvas width="123" height="123"></canvas> o dal codice JS canvas.width = canvas.height = 123. Inoltre, qui è possibile impostare formati da proprietà immagine canvas.width = img.width ecc

Quindi, guardi jsfiddle: http://jsfiddle.net/75rAU/3/ funziona bene

Poco UPD: http://jsfiddle.net/75rAU/4/ - questo può aiutare anche