HTML5 Canvas, Вставка зображень та тексту
Веб-програмування --- HTML5 --- HTML5 Canvas - вставка зображень та тексту
На полотні можна досконало намалювати будь-яку бажану графіку, від набору ліній або простих геометричних фігур до портрета з найдрібнішими подробицями. Але з підвищенням рівня складності графіки підвищується рівень складності коду. Вкрай малоймовірно, що можна було б написати самостійно весь код, необхідний створення високоякісного зображення.
Вставка у Canvas зображень
Вам, мабуть, доводилося бачити веб-сторінки із супутниковими картами того чи іншого регіону планети. Ці карти створюються зі знімків окремих ділянок поверхні землі, які ці сторінки завантажують із супутника та поєднують в одне зображення. Це приклад того, як можна взяти кілька зображень і поєднати їх в одне необхідним чином.
Полотно підтримує роботу зі звичайними зображеннями методом тексту малюванняdrawImage(). Щоб вставити зображення в полотно, методу drawImage() у параметрах передається об'єкт зображення та координати полотна, за якими це зображення слід вставити:
Але щоб передати об'єкт зображення, його потрібно спочатку отримати. HTML5 має три різні способи отримання об'єкта зображення. Перший підхід — створити його самостійно попіксельно за допомогою методу createImageData() . Але цей підхід дуже трудомісткий та повільний.
Другий підхід - використовувати елемент, що вже є в розмітці. Наприклад, якщо ми маємо наступну розмітку:
тоді зображення можна вставити в полотно за допомогою цього коду:
Нарешті можна створити об'єкт зображення та завантажити зображення з окремого файлу. Недолік цього підходу полягає в тому, щозображення не можна використовувати з методом drawImage(), поки воно повністю не завантажиться. Щоб уникнути проблем, потрібно почекати, поки не виконається подія завантаження зображення наLoad, перш ніж намагатися виконувати будь-які операції з ним.
Щоб розібратися у процесі, розглянемо приклад. Допустимо, нам потрібно відобразити на полотні зображення face.jpg. Теоретично, це можна зробити такою послідовністю операцій:
Тут проблема полягає в тому, що встановлення атрибута src починає завантаження зображення, але код продовжує виконуватися далі, не очікуючи завершення завантаження. Правильно буде використовувати наступний код:
Цей підхід може бути нелогічним, т.к. порядок зазначення операцій у коді не збігається з порядком виконання. У цьому прикладі виклик методу context.drawImage() відбувається в останню чергу, невдовзі після встановлення властивості img.src.
Зображення мають широкий спектр застосувань. Їх можна використовувати, щоб прикрасити штрихові малюнки або як альтернативу для малювання зображень самому. Зображення можна використовувати для різних об'єктів та персонажів, розмістивши їх відповідним чином на полотні. Зображення також можна використовувати для заповнення ліній, щоб надати їм текстурованого вигляду.
Спотворення малюнків в елементі Canvas
Якщо виявиться, що ваше зображення з незрозумілої причини розтягнуте, стисло або спотворене іншим чином, найбільш вірогідною причиною цього буде встановлення розміру полотна за допомогою правила таблиці стилів. Правильно встановлювати розмір полотна треба через вказівку його висоти та ширини в атрибутах height та width елемента у розмітці сторінки. Може здатися, що ці значення не обов'язково задавати в розмітці, використовуючи таку форму тега:
австановити їх у правилі таблиці стилів таким чином:
Але цей підхід не працюватиме. Проблема полягає в тому, що властивості height і width CSS відрізняються від однойменних властивостей елемента. Якщо не вказати розміри полотна в розмітці, буде встановлено розмір полотна за замовчуванням 300×150 пікселів. Потім таблиця стилів розтягуватиме або стискатиме полотно, щоб підігнати його до вказаних у ній розмірів, змінюючи відповідним чином розміри всього вмісту полотна. В результаті розміщені на полотні зображення будуть спотворені, що, безперечно, не зробить їх привабливими.
Обрізання, розрізання та зміна розмірів зображення
Функція drawImage() приймає кілька необов'язкових параметрів, які дають змогу маніпулювати зображенням на полотні. Наприклад, розмір зображення можна змінити, вказавши параметри width і height наступним чином:
В даному випадку метод розміщує зображення в рамці розміром 80x150 пікселів, верхній лівий кут якої знаходиться в точці полотна з координатами (10,10). Якщо початковий розмір зображення був 160x300 пікселів, то ця операція зменшує його розміри наполовину в обох напрямках, у результаті загальний розмір кінцевого зображення буде лише чверть розміру вихідного.
Якщо потрібно вставити в полотно лише частину зображення, методу drawImage() необхідно передати чотири параметри початку списку параметра. Ці параметри визначають позицію та розмір частини зображення, яку потрібно вирізати:
Останні чотири параметри в цьому коді ті ж, що й у попередньому прикладі – вони визначають позицію та розмір зображення на полотні. Припустимо, що ми хочемо вставити в полотно тільки верхню половину зображення з розміром 225x300 пікселів. Для цього з лівого верхнього кута зображення (точка(0,0)) відрізаємо частину зображення шириною 225 і висотою 150 пікселів, яку потім вставляємо в полотно в початковій точці з координатами (50,25). Все це робиться в одному рядку коду:
Можливостей методу drawImage() недостатньо, якщо зображення, що вставляється в полотно, потрібно повернути або скосити на певний кут. Але ці та інші маніпуляції із зображенням на полотні можна здійснити за допомогою трансформацій.
У першому параметрі методу drawImage() вказується зображення, яке потрібно вставити в полотно. Як ми тільки-но побачили, таким зображенням може бути створений об'єкт зображення або елемент, розташований десь в іншому місці розмітки.
Вставка в полотно тексту
Іншим типом даних, який нам навряд чи хотілося б складати з окремих прямих і кривих, є текст. На щастя, розробники HTML5 подбали про це для нас і надають два методи контексту малювання для роботи з текстом.
Але перш ніж вставляти в полотно якийсь текст, потрібно вказати шрифт для нього, встановивши значення властивості контекстуfont. Це значення вказується за допомогою рядка з таким синтаксисом, як і для універсальної властивості font CSS. Як мінімум, потрібно вказати розмір шрифту в пікселах та його назву. У разі невпевненості в підтримці певного шрифту браузерами можна вказати список шрифтів:
Також можна встановити жирний шрифт або курсив, вказавши відповідні параметри на початку рядка:
Найголовніше, завдяки CSS3 можна використовувати химерні вбудовані шрифти. Для цього потрібно лише спочатку зареєструвати назву шрифту у таблиці стилів. Після встановлення шрифту текст у полотні вводиться за допомогою методуfillText(). Наприклад, наступний код вводить в полотно рядок тексту, лівий верхнійкут якого знаходиться в точці (10,10):
Текст можна вставляти в будь-яке місце на полотні, але лише по одному рядку за один раз. Щоб вставити кілька рядків, потрібно здійснювати відповідну кількість викликів методу fillText().
Замість методу fillText() можна використовувати інший метод для введення тексту -strokeText(). Цей спосіб вводить контури літер тексту; Колір і товщина контурів визначаються значеннями властивостей контексту strokeStyle і lineWidth. Далі показано використання цього методу:
Як зазначалося, метод strokeText() вводить лише обриси букв. Якщо потрібно створити текст одного кольору, а його обведення - іншого, можна використовувати спочатку метод fillText(), а після нього метод strokeText().
Операція виведення тексту на полотно виконується набагато повільніше, ніж малювання ліній і навіть зображень. Швидкість не має значення при створенні статичного зображення (наприклад, діаграми), але може бути фактором при створенні інтерактивної програми або анімації. Оптимізувати введення тексту можна, спочатку зберігши необхідний текст у файлі зображення, а потім відображаючи його на полотні за допомогою drawImage().