HTML5 CANVAS нарисовать изображение

Question

Вот мой вопрос

Я вроде не понимаю, что такое 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? Я имею в виду, что целевое изображение все еще находится в местоположении dx = dy = 0, даже если мы установили sx и sy в разные значения, верно? Я знаю, что это глупый вопрос, но мне просто нужно знать ответ, спасибо!

Answer 1

(sx, sy) - это верхний левый угол исходного прямоугольника ( в пределах исходного изображения), который будет отображаться в пункте назначения. Посмотрите на диаграмму ниже:

[Ссылка]

sx = 0, sy = 0 отличается от sx = 300, sy = 300, поскольку они относятся к разным исходным прямоугольникам.

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