Wyciągnięcie na płótno Html5 Obraz rozciągnięty

Question

Próbowałem narysować obraz na płótnie html5. Kwestia jest obraz rozciągnięty w płótnie

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); 
    } 
); 

dodałem ten problem w http://jsfiddle.net/75rAU/

Answer 1

to dlatego, że zmodyfikowany rozmiar płótna w CSS. Obszar roboczy ma dwa oddzielne rozmiary: rozmiar HTML (ten, który umieścisz w tagu canvas) i rozmiar css, który jest w rzeczywistości przeskalowaniem obszaru roboczego. Rozmiar HTML to rozmiar, który kontrolujesz (podczas rysowania używa on tego rozmiaru), a rozmiar CSS to rozmiar wyświetlany, który jest przeskalowaniem rozmiaru HTML.

Więc, twój płótno ma domyślny rozmiar (który już nie pamiętam), ale jest przeskalowany (rozciągnięty i) przez css

HTML:

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

CSS:

#cv { 
    background:#ff0; 
} 

Tutaj I updated your fiddle z prawidłowym przydziałem rozmiaru

Answer 2

Płótno ma własne rozmiary. 300x150 domyślnie. Style (szerokość/wysokość) po prostu rozciągnij canvas jak dowolnego obrazu. Dlatego należy zdecydowanie ustawić rozmiary według swoich potrzeb. Możesz to zrobić za pomocą html <canvas width="123" height="123"></canvas> lub kodu JS canvas.width = canvas.height = 123. Również tutaj można ustawić rozmiary przez właściwości obrazu canvas.width = img.width itp

więc spojrzeć na jsfiddle: http://jsfiddle.net/75rAU/3/ Działa dobrze

Mała UPD: http://jsfiddle.net/75rAU/4/ - może to pomóc zbyt