DrawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

Первый параметр image, определяет идентификатор изображения. Следующие 2 элемента определяют положения верхнего левого угла вырезаного изображения относительного исходного положения а, следующие два параметра определяют высоту и ширину вырезаного изображения. Следующие два параметра определяют положение изображения на холсте а, следующие два параметра масштаб изображения.

Разрезание можно использовать чтобы обьеденить все элементы в один файл, что позволяет ускорить работу сайта а, также не загружать все элементы по отдельности.

Пример 3 использования изображения

В этом примере мы будем вырезать голову носорога и вставлять ее в рамку.

В этом примере мы используем другой подход к загрузке изображений, чем в примере выше.Мы просто размечаем изображения непосредственно в HTML документе и используем правила CSS, чтобы скрыть их. Обоим изображениям мы присваиваем атрибут id чтобы их было легче выбрать. Скрипт сам по себе очень прост. Сначала мы вырезаем голову носорого и помещаем ее на холст а, затем помещаем изображение рамки на холст.

Посмотреть этот пример

function draw() { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // Draw slice ctx.drawImage(document.getElementById('source'), 33,71,104,124,21,20,87,104); // Draw frame ctx.drawImage(document.getElementById('frame'),0,0);}

Пример галереи

В финальном примере мы сделаем простую галерею изображений. Галерея состоит из таблицы содержащей несколько изображений. При загрузке страницы каждое изображение вставляется на холст а, затем и рамка вокруг него.

Код ниже, должен говорить сам за себя. Мы используем цикл и добавляем новые элементы на холст. Наверное, единственное, что можно отметить, для тех, кто не очень знаком с DOM, является использование insertBefore метода. insertBefore это метод родительского узла (ячейки таблицы) в который мы хотим вставить наш новый узел (холст).

Посмотреть этот пример

Итак существует три перегруженных функции drawImage:

drawImage(pic, 0, 0); // Рисуем изображение от точки с координатами 0, 0

drawImage(image, x, y, width, height) // параметры width, height меняют ширину и высоту изображения

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

// Первый параметр указывает то, какое изображение обрабатывать

// sx, sy, sWidth, sHeight указывают параметры фрагмента на изображение-источнике

// dx, dy, dWidth, dHeight ответственны за координаты отрисовки фрагмента на холсте