的javascript：如何canvas.drawImage工作

我試圖繪製圖像到畫布上，像這樣：的javascript：如何canvas.drawImage工作

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

畫布是由200像素和200像素的圖像要大得多（但在200像素風格也就是200px）

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

「0,0,100,100」，其是被吸入到畫布上的部分中的圖像上定義一矩形。 0,0定義了頂部/左邊角，100,100是邊的寬度。
這個矩形被繪製到矩形內的帆布0,0,200,200

任何建議定義什麼不順心嗎？

來源

2013-12-13 Jeanluca Scaljeri

錯誤有，我相信，圖像尚未加載。我認爲你需要使用回調函數來顯示圖像，一旦它被加載，但我會留下實際的答案給誰肯定的人:) – kviiri

jsfiddle問題是跨域，在你機器的作品？ –

@kviiri：沒有問題，提問者從圖像中剪下了白色空間。但是如果圖像之前沒有加載（不在瀏覽器緩存中），那麼確實會發生這種情況。 – GitaarLAB

你的圖像實際上是585 x 585所以你正在做的是從它剪下一個角落（這是空白），並將其繪製到畫布上，當然不會顯示任何東西。

使用CSS縮放圖像實際上並未改變其大小。它只能縮放顯示。

所以你需要做的是使用圖像的原始大小作爲基礎。如果你只是想縮小到適合帆布，你可以這樣做：

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

畫布也是如此。不要使用CSS擴展畫布，但設置寬度和高度屬性/屬性或其他畫布將默認爲300x150（然後由你的CSS縮放）：

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

Modified fiddle

來源

2013-12-13 20:54:11 K3N

thnx，現在它清晰。我更新了[jsfiddle]（http://jsfiddle.net/FQhGg/4/），因爲我需要裁剪和調整大小 –

設置寬度和高度，並以相同的尺寸繪製圖像。更新你的小提琴 - 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);

來源

2013-12-13 20:55:48 NaNpx

的javascript：如何canvas.drawImage工作

回答

相關問題