javascript：canvas.drawImage如何工作

Question

我正在嘗試將圖像繪制到畫布上，如下所示：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,0,0,100,100,0,0,200,200);

畫布為200px x 200px，圖像更大（但樣式也設置為200px x 200px）

正如您在jsfiddle中看到的那樣 ，畫布不顯示圖像（我期待圖像的一部分）。 我的drawImage（如描述的理解這里 ）是這樣的：

• “ 0,0,100,100”在圖像上定義一個矩形，該矩形是繪制到畫布上的部分。 0,0定義了上/左角，而100,100是邊的寬度。
• 該矩形被繪制到由0,0,200,200定義的矩形內的畫布上

有什么建議在這里出什么問題嗎？

Answer 1

您的圖像實際上是585 x 585，因此您要做的是從圖像上修剪一個角（空白）並將其繪制到畫布上，這當然不會顯示任何內容。

使用CSS縮放圖像實際上並不會改變其大小。 僅縮放顯示。

因此，您需要做的是使用圖像的原始大小作為基礎。 如果您只是想將其縮小以適合畫布，則可以執行以下操作：

ctx.drawImage(img, 0, 0, 200, 200);

畫布也是如此。 不要使用CSS縮放畫布，而是設置width和height屬性/屬性，否則畫布將默認設置為300x150（然后由CSS縮放）：

<canvas width=200 height=200 ...>

改良的小提琴

Answer 2

在畫布上設置寬度和高度，並以相同的尺寸繪制圖像。 更新了您的小提琴-http: //jsfiddle.net/FQhGg/2/

var c=document.getElementById("myCanvas"),
    ctx=c.getContext("2d"),
    img=document.getElementById("scream"),
    width = img.width,
    height = img.height;

c.width = width;
c.height = height;
ctx.drawImage(img,0,0,width,height);