问题描述
这里是我的问题
我有点不明白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的位置,对吧?我知道这是一个愚蠢的问题,但我只需要知道答案,谢谢!
(sx,sy)是源矩形的左上角(源图像)将要绘制到目的地。看看下图:
p>
sx = 0,sy = 0不同于sx = 300,sy = 300因为它们引用不同的源矩形。
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!
(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:
sx=0,sy=0 is different from sx=300,sy=300 because they refer to different source rectangles.
这篇关于HTML5 CANVAS绘制图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!