本文介绍了HTML5 CANVAS绘制图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这里是我的问题



我有点不明白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:

[Reference]

sx=0,sy=0 is different from sx=300,sy=300 because they refer to different source rectangles.

这篇关于HTML5 CANVAS绘制图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-03 23:28
查看更多