HTML5 TOILE dessiner l'image

Question

Voici ma question

Je comprends genre de pas ce qui est le sx et sy est dans la fonction ci-dessous

context.drawImage (Image, sx, sy, sw, sh, dx , dy, dw, dh); Ce que je veux dire vraiment, c'est que si nous changeons les valeurs de sx et sy et fixons dx et dy à une valeur fixe, disons dx = 0 et dy = 0, est-ce qu'il y aura vraiment quelque chose de différent à notre image? sur la toile quand on met sx = 300 et sy = 300 par rapport à sx = 0 et sy = 0? Je veux dire que l'image de destination est toujours à l'emplacement dx = dy = 0 même si nous mettons sx et sy à des valeurs différentes, n'est-ce pas? Je sais que c'est une question stupide mais j'ai juste besoin de connaître la réponse, merci!

Answer 1

(sx, sy) est le coin supérieur gauche du rectangle source (dans l'image source) qui va dessiner vers la destination. Jetez un oeil sur le schéma ci-dessous:

[Reference]

sx = 0, 0 = sy est différent de sx = 300, 300 = sy parce qu'ils se réfèrent à des rectangles de différentes sources.

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