问题
Here is my question
I kind of not understand what is the sx and sy is for in below function
context.drawImage(Image, sx, sy, sw, sh, dx, dy, dw, dh);
what I really mean is if we change the values of sx and sy and set our dx and dy to a fix value, let say dx=0 and dy=0, is there really going to make any different to our image on the canvas when we set sx=300 and sy=300 as compared to sx=0 and sy=0? I mean the destination image is still in the location dx=dy=0 even we set sx and sy to different values, right? I know this is a stupid question but I just need to know the answer, thanks!
回答1:
(sx, sy) is the top-left corner of the source rectangle (within the source image) which are going to draw to the destination. Take a look at the diagram below:
[Reference]
sx=0,sy=0 is different from sx=300,sy=300 because they refer to different source rectangles.
回答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);
}
来源：https://stackoverflow.com/questions/6060881/html5-canvas-draw-image