HTML5 CANVAS绘制图像

这是我的问题

我有点不明白sx和sy是什么在下面的功能

context.drawImage(Image,sx,sy,sw,sh,dx,dy,dw,dh);

我真正的意思是,如果我们改变sx和sy的值并将我们的dx和dy设置为一个固定值,比如说dx = 0和dy = 0,那么在画布上是否真的会对我们的图像产生任何不同与sx = 0和sy = 0相比,我们设置sx = 300和sy = 300？我的意思是目标图像仍然在dx = dy = 0的位置,即使我们将sx和sy设置为不同的值,对吗？我知道这是一个愚蠢的问题,但我只需要知道答案,谢谢！

解决方法

(sx,sy)是源矩形的左上角(在源图像中),它将绘制到目标.看看下图：

[Reference]

sx = 0,sy = 0与sx = 300不同,sy = 300,因为它们指的是不同的源矩形.