Html5畫布drawImage拉伸

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大小（放在canvas標簽內的大小）和css大小，實際上是畫布的重新縮放。 HTML大小是您控制的大小（繪制時，它使用此大小），CSS大小是顯示的大小，它是HTML大小的重新縮放。

所以在這里，你的畫布有默認大小（我不記得了）但是由css調整大小（和拉伸）

HTML：

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

CSS：

 #cv {
    background:#ff0;
}

在這里，我用正確的大小分配更新你的小提琴

Answer 2

Canvas有自己的尺寸。 默認為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/它運作良好

小更新 ： http ： //jsfiddle.net/75rAU/4/ - 這也可能有所幫助