HTML5 imagen Drenaje LONA

Question

Aquí está mi pregunta

Yo como que no entiendo lo que es la sx y sy es en función a continuación

context.drawImage (Imagen, sx, sy, sw, sh, dx , dy, dw, dh);

lo que realmente quiero decir es que si cambiamos los valores de sx y sy y establecemos nuestro dx y dy en un valor fijo, digamos dx = 0 y dy = 0, realmente vamos a hacer algo diferente a nuestra imagen en el lienzo cuando establecemos sx = 300 y sy = 300 en comparación con sx = 0 y sy = 0? Me refiero a que la imagen de destino todavía está en la ubicación dx = dy = 0 incluso establecemos sx y sy en diferentes valores, ¿no? Sé que es una pregunta estúpida, pero solo necesito saber la respuesta, ¡gracias!

Answer 1

(sx, sy) es la esquina superior izquierda del rectángulo de origen (dentro de la imagen de origen) que se dibujará en el destino. Echar un vistazo al siguiente diagrama:

[Reference]

sx = 0, sy = 0 es diferente de sx = 300, sy = 300, ya que se refieren a diferentes rectángulos de origen.

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