DrawImage(image, x, y, width, height)

Где width и height ширина и высота изображения на холсте.

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

В этом примере мы используем одно изображение как обои чтобы повторить его на холсте несколько раз. Это осуществляется с помощью цикла и размещения масштабных изображений на разных позициях. В этом примере первый цикл for отсчитывает ряды а второй цикл for отсчитывает колоны. Изображение равно одной третьей исходного изображения (50x38 пикселей).

Примечание: При масштабировании изображение теряет качество, а текст теряет очертания.

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

function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.onload = function(){ for (i=0; i< 4; i++){ for (j=0; j< 3; j++){ ctx.drawImage(img, j*50, i*38, 50, 38); } } } img.src = 'images/rhino.jpg'; }

Разрезание изображений

Третий и последный типа метода drawImage включает 8 новых параметров. Мы будем использовать этот метод чтобы отбражать часть изображения на холсте

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 это метод родительского узла (ячейки таблицы) в который мы хотим вставить наш новый узел (холст).

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

function draw() { // Loop through all images for (i=0; i< document.images.length; i++){ // Don't add a canvas for the frame image if (document.images[i].getAttribute('id')! ='frame'){ // Create canvas element canvas = document.createElement('CANVAS'); canvas.setAttribute('width', 132); canvas.setAttribute('height', 150); // Insert before the image document.images[i].parentNode.insertBefore(canvas, document.images[i]); ctx = canvas.getContext('2d'); // Draw image to canvas ctx.drawImage(document.images[i], 15, 20); // Add frame ctx.drawImage(document.getElementById('frame'), 0, 0); } }}

 

Итак существует три перегруженных функции 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 ответственны за координаты отрисовки фрагмента на холсте

Метод CLIP()

Метод позволяет вырезать изображение по заранее созданной маске.

 

< html>

< head>

< canvas id=" myCanvas" width=" 800" height=" 700" > Треугольное изображение< /canvas>

< script type='text/javascript'>

// Контекст для работы

var ctx = document.getElementById(" myCanvas" ).getContext(" 2d" );

var img1 = new Image();

img1.src = 'd: /MySite/forest.jpg';

function drawPoligon(){

//Создается маска

ctx.beginPath();

ctx.moveTo(20, 20);

ctx.lineTo(470, 470);

ctx.lineTo(20, 470);

ctx.closePath();

⇐ Предыдущая12345

Поделиться: