HTML5 CANVAS 绘制图像

Question

这是我的问题，

中的 sx 和 sy 是什么意思

我有点不明白下面的函数context.drawImage(Image, 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 位置，对吧？我知道这是一个愚蠢的问题，但我只需要知道答案，谢谢！

Answer 1

(sx, sy) 是将要绘制到目标的源矩形（在源图像内）的左上角。看一下下图：

[参考]

sx=0,sy=0 与 sx=300,sy=300 不同，因为它们引用不同的源矩形。

Answer 2

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