HTML5畫布繪製圖像

我有點不明白什麼是SX和SY是用於以下功能

context.drawImage（圖片，SX，SY，SW，SH，DX ，dy，dw，dh）;

我真正的意思是，如果我們改變sx和sy的值，並將我們的dx和dy設置爲固定值，比如說dx = 0和dy = 0，是否真的會對我們的圖像產生任何不同在畫布上，當我們設置sx = 300和sy = 300與sx = 0和sy = 0相比時？我的意思是，即使我們將sx和sy設置爲不同的值，目標圖像仍然位於dx = dy = 0的位置，對吧？我知道這是一個愚蠢的問題，但我只需要知道答案，謝謝！

來源

2011-05-19 mr.choose

（sx，sy）是要繪製到目的地的源矩形的左上角（範圍內的源圖像）。看一看下圖：

enter image description here

[Reference]

SX = 0，SY = 0是從SX = 300，SY不同= 300，因爲它們是指不同來源的矩形。

來源

2011-05-19 15:30:17 dogbane

不同的源矩形對圖像會有什麼影響？圖像在畫布上的位置會改變嗎？ – 2011-05-19 22:02:45

如果您有不同的源矩形，您將繪製源圖像的不同部分。如果你想繪製整個源圖像，那麼你將不得不從0,0開始。 – dogbane 2011-05-20 08:04:01

是的，但爲什麼我們需要將sx和sy放在不同的位置，是不是我們在修復dx = 0和dy = 0位置獲得相同的圖像？我的意思是目標圖像仍然是相同的，雖然sx和sy已經改變了，對吧？ – 2011-05-20 12:35:32

var img = new Image(); 
img.onload = function init_sketch() { 
img.src = 'http://cssdeck.com/uploads/media/items/3/3yiC6Yq.jpg'; 
context.drawImage(img, 0, 0); 
}

來源

2014-03-31 13:36:30

HTML5畫布繪製圖像

回答

相關問題