Html5 canvas drawImage stretched

Question

我試圖在html5畫布上繪製圖像。問題是圖像在畫布

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

拉伸我http://jsfiddle.net/75rAU/

Answer 1

那是因爲你在CSS修改畫布大小添加了此問題。 畫布有兩個單獨的大小：HTML大小（放置在畫布標記內的大小）和CSS大小，它實際上是畫布的縮放比例。 HTML大小是您控制的大小（繪製時使用此大小），CSS大小是顯示的大小，即HTML大小的縮放比例。

所以在這裏，你的畫布有默認的大小（我不記得了），而是通過CSS

HTML改變尺寸（拉伸）：

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

CSS：

#cv { 
    background:#ff0; 
} 

這裏我updated your fiddle與正確的大小分配

Answer 2

畫布有它自己的尺寸。默認爲300x150。樣式（寬度/高度）像任何圖像一樣伸展canvas。所以，你應該強烈地將尺寸設置爲你想要的尺寸。你可以通過html <canvas width="123" height="123"></canvas>或者JS代碼canvas.width = canvas.height = 123來完成。此外，在這裏你可以通過圖像屬性中設置的大小canvas.width = img.width等

所以，看的jsfiddle：http://jsfiddle.net/75rAU/3/ 它運作良好

小UPD：http://jsfiddle.net/75rAU/4/ - 這可能也是幫助