HTML5画布绘制图像

我有点不明白什么是SX和SY是用于以下功能

context.drawImage（图片，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的位置，对吧？我知道这是一个愚蠢的问题，但我只需要知道答案，谢谢！

来源

2011-05-19 mr.choose

（sx，sy）是要绘制到目的地的源矩形的左上角（范围内的源图像）。看一看下图：

enter image description here

[Reference]

SX = 0，SY = 0是从SX = 300，SY不同= 300，因为它们是指不同来源的矩形。

来源

2011-05-19 15:30:17 dogbane

不同的源矩形对图像会有什么影响？图像在画布上的位置会改变吗？ – 2011-05-19 22:02:45

如果您有不同的源矩形，您将绘制源图像的不同部分。如果你想绘制整个源图像，那么你将不得不从0,0开始。 – dogbane 2011-05-20 08:04:01

是的，但为什么我们需要将sx和sy放在不同的位置，是不是我们在修复dx = 0和dy = 0位置获得相同的图像？我的意思是目标图像仍然是相同的，虽然sx和sy已经改变了，对吧？ – 2011-05-20 12:35:32

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

来源

2014-03-31 13:36:30

HTML5画布绘制图像

回答

相关问题