Робота з зображеннями
Canvas може працювати з зображеннями в найбільш поширених форматів (GIF, JPEG, PNG) і має функції для управління – розмір і поворот на рівні пікселів. Це дає великі можливості для обробки зображень за допомогою полотна. Можна застосовувати зображення в якості фону, робити ескізи, масштабування і змінювати колір.
Першим кроком роботи з полотном є завантаження фото. Є кілька способів зробити це. Поки воно не буде повністю завантажене, користувач не зможе з ним працювати. Два найбільш поширених способу завантаження:
Якщо потрібно, щоб воно було видно тільки після обробки, застосовують властивість hidden в тегу. Є й інші способи завантаження, наприклад, використовувати створений малюнок в іншому об’єкті. Його також можна завантажити з допомогою методу data: url. Коли завершено завантаження, можна малювати, використовуючи drawImage, який підтримує кілька форматів: drawImage (зображення, х, у). Малюють зображення на полотні, помістивши верхній лівий кут в координатах (x, y).
JavaScript Canvas drawimage (зображення, x, y, ширина, висота) дозволяє змінити масштаб зображення. Перші три параметри мають те ж значення, що і в попередньому випадку. Ширина і висота визначають розмір (в пікселях), в якому буде відображатися графіка. Якщо макет більше оригіналу, отримують збільшення зображення, а якщо менше – мініатюризацію. Якщо потрібно, щоб зображення не деформувалося, необхідно підтримувати співвідношення ширини і висоти вихідного зображення.
DrawImage (зображення, x1, y1, ширина1, высота1, x2, y2, ширина 2, высота2) масштабує частину малюнка. З допомогою цієї функції на полотні буде відображатися вміст кольорової рамки, її включили в якості фону. Ця функція бере частину вихідного зображення, визначену як x1, y1 (ширина 1, висота 1) і малює цю частину в іншій позиції (x2, y2) і в іншому масштабі (ширина 2, висота 2). В цьому випадку створюють збільшення області, тому що значення ширина і висота 2 більше, ніж 1.
