Додавання зображень

Для додавання зображень ви можете використовувати прості функції, одна з них називається DrawImage – вона переводить зображення на полотно. Після того як зображення доступне, функція DrawImage дає велику гнучкість, щоб змінити розмір і показати частину зображення,.

1. У папці HTML5_05lessons, відкрийте файл 05_addingimages.html і збережіть копію файлу 05_addingimages_work.html. Цей файл створено як копію вихідного шаблону полотна, що введений в першій частині цієї лабораторної роботи.

2. fishlake.jpg знаходиться в папці з зображеннями.

3. У разі появи мінливості, додайте наступний код:

var img = new Image();

img.onload = function(){

}

img.src = 'images/fishlake.jpg';

4. В фігурні дужки ({}) в функцію OnLoad, додайте наступний код наступним чином:

img.onload = function(){

  ctx.drawImage(img, 0, 0);

}

Це визначає зображення в положення X Y 0,0.

Збережіть HTML-файл, а потім переключіться в браузер і перегляньте HTML-сторінку:

Рисунок 21 – Зображення fishlake обрізані

 

Образ відкритий, але він був також обрізаний, так як оригінальний розмір файлу зображення більший, ніж полотно елементу.

5. Щоб змінити розмір зображення, змініть лінію з пункту 4 в наступних випадках:

ctx.drawImage (IMG, 0, 0, 300, 200);

Це говорить полотну намалювати зображення в положенні XY 0,0, а потім змінити його розмір в ширину 300 пікселів і висотою 200 пікселів.

6. Збережіть HTML-файл, а потім переключіться в браузер і перегляньте HTML-сторінку, що відображає зміни:

Рисунок 22 – Зображення fishlake змінено для відповідності в межах наявного простору

7. В остаточному варіанті функції DrawImage, ви можете визначити положення джерела, ширину і висоту, а також призначення становище, ширину і висоту. Змінити лінію з пункту 4 в наступних випадках:

ctx.drawImage (IMG, 287, 132, 100, 100, 0, 0, 300, 300);

Це визначає зображення в положенні XY 0,0 в ширину і висоту 300, з використанням прямокутної частини на початку вихідного зображення на позицію 287, 132 на ширину і висоту 100.

8. Збережіть HTML-файл, а потім переключіться в браузер і перегляньте HTML-сторінку.

Рисунок 23 – Зображення fishlake збільшено на певному місці