Основи HTML5: Частина 4. Завершальний штрих - Canvas

  1. Серія контенту:
  2. Цей контент є частиною серії: Основи HTML5
  3. Удосконалення кваліфікаційних навичок з даної тематики
  4. Часто використовувані скорочення
  5. координати Canvas
  6. Малюнок 1. Координати Canvas
  7. Початок роботи
  8. малювання ліній
  9. Малюнок 2. Область Canvas з лініями різного кольору
  10. Лістинг 1. Створення в середовищі Canvas трьох ліній різного кольору
  11. Малюнок 3. Прямокутна область Canvas
  12. Лістинг 2. Код для малювання прямокутних областей на Canvas
  13. квадратична крива
  14. крива Безьє
  15. Малюнок 4. Дуга, криві і коло
  16. Лістинг 3. Код для дуги, кривої і кола
  17. Малюнок 5. Використання перетворень
  18. Лістинг 4. Код для створення перетворень
  19. Малюнок 6. Приклади градієнтів
  20. Лістінг 5. Приклад коду для формирование градієнта
  21. Малюнок 7. Обрізати зображення
  22. Малюнок 8. Підсумкове кадрувати зображення
  23. Лістинг 6. Код для кадрування прикладу зображення
  24. Малюнок 9. Анімація з використанням зображень на кількох тегах Canvas
  25. Лістинг 7. Приклад анімації
  26. Ресурси для скачування

основи HTML5

Можливості тега Canvas

Серія контенту:

Цей контент є частиною # з серії # статей: Основи HTML5

http://www.ibm.com/developerworks/ru/opensource/library/?series_title_by=html5+Основы

Слідкуйте за виходом нових статей цієї серії.

Цей контент є частиною серії: Основи HTML5

Слідкуйте за виходом нових статей цієї серії.

Автор HTML5-матеріалів поєднує в одній особі безстрашного проектувальника і раціонального розробника. Мета його діяльності полягає в побудові ефективних RIA-додатків (Rich Internet Application - насичені Інтернет-додатки), особливо таких, які мають насичені користувача інтерфейсами. Говорячи про побудову ефективних додатків, я в першу чергу маю на увазі створення системних і систематичних удосконалень, які «цифровим чином» забезпечують діалог між власником сайту, агентами цього власника і відвідувачами сайту.

Удосконалення кваліфікаційних навичок з даної тематики

Дана стаття є частиною навчальної програми щодо вдосконалення кваліфікаційних навичок. Див. Основи HTML5.

RIA-додатки є одночасно джерело і рушійну силу належних призначених для користувача можливостей, тому вони є найважливішим компонентом кожного успішного сетецентріческой підприємства. За своєю природою сетецентріческой заходи завжди є колективними - до тій чи іншій мірі. Продуктивний підхід до цифрового співпраці необхідний підприємству для досягнення успіху на будь-якому рівні, включаючи маркетинг і менеджмент. Кінцеві результати визначаються ефективністю, з якою сайт задовольняє потребу своїх відвідувачів в якісному продукті.

Як ви вже переконалися, технології HTML5 спеціально створені для світу «one web world», відмітними особливостями якого є межплатформенному можливості, конвергентні комунікації, уніфікована мова, всюдисуща комп'ютеризація та відкриті системи. Перші три частини даної серії статей були присвячені таким темам, як семантичні теги, належні методи написання коду, роль введення інформації в життєво важливому процесі конверсії відвідувачів, найкращі методики управління сайтами. Всі ці теми формують фундамент для RIA-додатків - організованим і раціональним чином. Загальна ідея всіх статей полягає в тому, що створення насичених призначених для користувача можливостей і управління ними життєво необхідно власникам Web-сайту для досягнення своїх «виробничих» цілей. HTML5-тег Canvas грає найважливішу роль в створенні ефективних RIA-додатків.

Часто використовувані скорочення
  • 2D: Two-dimensional (двомірний).
  • Ajax: Asynchronous JavaScript + XML (технологія Ajax).
  • API: Application programming interface (Інтерфейс прикладного програмування, API-інтерфейс).
  • HTML: Hypertext Markup Language (мова гіпертекстової розмітки, мова HTML).
  • HTML5: HTML, версія 5.
  • UI: User interface (Інтерфейс користувача).

Що таке Canvas

HTML5-тег Canvas є виключно корисним інструментом для малювання та анімації. Тег Canvas використовує технологію JavaScript для малювання графічних об'єктів безпосередньо на Web-сторінці. Canvas являє собою прямокутну область, що задається і контрольовану розробником. Ця область дозволяє здійснювати допускає використання сценаріїв візуалізацію двовимірних 2D-форм і растрових зображень.

Тег Canvas ідеально підходить для створення вражаючих візуальних матеріалів, які покращують призначені для користувача інтерфейси, діаграми, фотоальбоми, схеми, графіки, анімовані матеріали і вбудовані графічні додатки. Тег Canvas має кілька методів для малювання маршрутів, прямокутників, кіл і символів.

координати Canvas

Обов'язковою умовою для створення зображень в середовищі Canvas є знайомство з координатної сіткою (координатної площиною). Вимірювання просторової області по ширині і висоті задаються в пікселах. У середовищі Canvas використовуються координати x і y. Верхній лівий кут області Canvas має координати x = 0, y = 0.

За замовчуванням розміри прямокутної області Canvas мають ширину 300 пікселів і висоту 150 пікселів, але ви можете задати точні розміри тега Canvas за допомогою вказівки його ширини і висоти. Схема на малюнку 1 демонструє організацію координатного простору по x і y.

Малюнок 1. Координати Canvas

На малюнку 1 показана область Canvas розміром 100 х 100 пікселів.

  • Лівий верхній кут має координати x = 0, y = 0.
  • Значення координати x збільшується по горизонталі, а значення координати y збільшується по вертикалі.
  • Правий нижній кут має координати x = 100, y = 100.
  • Центральна точка має координати x = 50, y = 50.

Початок роботи

Щоб помістити що-небудь в зону Canvas, спочатку потрібно задати область Canvas в HTML-файлі. Щоб намалювати свої зображення, ви повинні створити JavaScript-код, який звертається до тегу <canvas> і коммуницирует з API-інтерфейсом HTML5 Canvas.

Базова структура тега <canvas> має такий вигляд:

<Canvas id = "myCanvas" width = "200" height = "200"> </ canvas>

Тег canvas має два власних атрибута: width (висота) і height (ширина). Крім того, тег Canvas має всі ключові HTML5-атрибути, такі як class, id і name. Атрибут id використовується в показаному вище коді. JavaScript-код використовує створений тут ідентифікатор id тега Canvas для позначення області Canvas, на якій буде здійснюватися малювання. JavaScript-код виявляє належну область Canvas за допомогою методу document.getElementById (), як показано нижче.

var canvas = document.getElementById ( "myCanvas");

Кожен тег Canvas повинен мати визначення контексту, як показано нижче. В даний час офіційна специфікація поширюється тільки на 2D-середу.

var context = canvas.getContext ( "2d");

Після ідентифікації належної області Canvas і вказівки її контексту можна приступати до малювання.

Розгляд тематики HTML5 Canvas в даній статті охоплює різні інструменти малювання, ефекти і перетворення. Інструменти малювання забезпечують формування наступних об'єктів:

  • Лінії.
  • Прямокутники.
  • Дуги.
  • Криві Безьє і квадратичні криві.
  • Кола і півкола.

Ми будемо використовувати такі ефекти Canvas:

  • Заповнення і мазки.
  • Лінійні і радіальні градієнти.

Будуть розглянуті наступні перетворення:

  • Масштабування.
  • Поворот.
  • Переміщення.

малювання ліній

Щоб намалювати лінію в середовищі Canvas, скористайтеся методами moveTo (), lineTo () і stroke (). Крім того, використовуйте метод beginPath () для відновлення поточного маршруту.

  • context.beginPath ();
  • Context.moveTo (x, y);
  • Context.lineTo (x, y);
  • Context.stroke (x, y);

Метод beginPath () починає новий маршрут. Перш ніж малювати нову лінію з різними субмаршрутамі, необхідно застосувати метод beginPath () для вказівки нової початкової точки малювання. Коли ви малюєте першу лінію, немає необхідності викликати метод beginPath ().

Метод moveTo () задає початкову точку, в якій повинен починатися новий субмаршрут. Метод lineTo () створює субмаршрути. Зовнішньої вид лінії можна змінити за допомогою тегів lineWidth і strokeStyle. Тег lineWidth змінює товщину лінії, а тег strokeStyle змінює колір лінії.

На малюнку 2 показані три лінії, намальовані з використанням різних кольорів.

Малюнок 2. Область Canvas з лініями різного кольору

Лінії на малюнку 2 були створені за допомогою коду, показаного в лістингу 1 . Синя лінія з закругленими кінцями створюється наступним чином. Спочатку вказується необхідність початку нового маршруту: context.beginPath (). Потім використовуються наступні методи:

  • context.moveTo (50, 50), поміщає початок маршруту в точку з координатами (x = 50, y = 50).
  • context.lineTo (300,50), специфікує кінцеву точку лінії.
  • context.lineWidth = 10, специфицирует ширину лінії.
  • context.strokeStyle = "# 0000FF", специфицирует колір лінії.
  • context.lineCap = "round", робить кінці закругленими.
  • context.stroke (), здійснює фактичне малювання лінії на Canvas.

Всі описувані лінії мають довжину по 50 пікселів, хоча і створюється враження різної довжини - це візуальна ілюзія, що породжується так званими «завершувач ліній» (line cap). Є три можливих типи завершувача:

  • Context.round (синій).
  • Context.square (зелений).
  • Context.butt (фіолетовий - за замовчуванням).

За замовчуванням використовується завершувач butt. При використанні закруглених або квадратних завершітелей довжина лінії збільшується на величину, рівну ширині цієї лінії. Наприклад, лінія довжиною 200 пікселів і шириною 10 пікселів з закругленими або квадратними завершувач матиме результуючу довжину 210 пікселів, оскільки кожен завершувач додає по 5 пікселів на кожному кінці лінії. Лінія довжиною 200 пікселів і шириною 20 пікселів з закругленими або квадратними завершувач матиме результуючу довжину 220 пікселів, оскільки кожен завершувач додає по 10 пікселів на кожному кінці лінії.

Щоб краще зрозуміти, як здійснюється малювання ліній, виконайте і змініть код на малюнку 1.

Лістинг 1. Створення в середовищі Canvas трьох ліній різного кольору
<! DOCTYPE HTML> <html> <head> <title> Line Example </ title> <style> body {margin: 0px; padding: 0px; } #MyCanvas {border: 1px solid # 9C9898; } </ Style> <script> window.onload = function () {var canvas = document.getElementById ( "myCanvas"); var context = canvas.getContext ( "2d"); // blue line with round ends context.beginPath (); context.moveTo (50, 50); context.lineTo (300,50); context.lineWidth = 10; context.strokeStyle = "# 0000FF"; context.lineCap = "round"; context.stroke (); // green line with square ends context.beginPath (); context.moveTo (50, 100); context.lineTo (300,100); context.lineWidth = 20; context.strokeStyle = "# 00FF00"; context.lineCap = "square"; context.stroke (); // purple line with butt ends context.beginPath (); context.moveTo (50, 150); context.lineTo (300, 150); context.lineWidth = 30; context.strokeStyle = "# FF00FF"; context.lineCap = "butt"; context.stroke (); }; </ Script> </ head> <body> <canvas id = "myCanvas" width = "400" height = "200"> </ canvas> </ body> </ html>

малювання прямокутників

Для створення прямокутної області в Canvas є три методи:

  • fillRect (x, y, width, height), малює зафарбований прямокутник.
  • strokeRect (x, y, width, height), малює контурний прямокутник.
  • clearRect (x, y, width, height), очищає задану прямокутну область і робить її повністю прозорою.

Для кожного з цих трьох методів x і y задають положення на Canvas щодо лівого верхнього кута прямокутника (x = 0, y = 0), а width і height задають ширину і висоту прямокутника, відповідно.

На малюнку 3 показані три прямокутні області, створені за допомогою коду в лістингу 2 .

Малюнок 3. Прямокутна область Canvas

Метод fillRect () створює прямокутник, заповнений кольором за замовчуванням (чорний). Метод clearRect () створює прямокутну область в центрі першого прямокутника. Вона розміщується в центрі прямокутника, сформованого методом fillRect (). Метод strokeRect створює прямокутник, який має тільки видиму чорну кордон.

Лістинг 2. Код для малювання прямокутних областей на Canvas
<! DOCTYPE HTML> <html> <head> <title> Rectangle Example </ title> <style> body {margin: 0px; padding: 0px; } #MyCanvas {border: 1px solid # 000000; background-color: # ffff00; } </ Style> <script type = "text / javascript"> function drawShape () {var canvas = document.getElementById ( 'myCanvas'); var context = canvas.getContext ( '2d'); context.fillRect (25,25,50,50); context.clearRect (35,35,30,30); context.strokeRect (100,100,50,50); } </ Script> </ head> <body onload = "drawShape ();"> <canvas id = "myCanvas" width = "200" height = "200"> </ canvas> </ body> </ html>

Малювання дуг, кривих, кіл і напівкіл

Для малювання кіл і напівкіл застосовується метод arc (). Метод arc () має шість аргументів:

context.arc (centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);

Аргументи centerX і centerY задають координати центру кола. Аргумент radius є радіус, тобто відстань по прямій від центру до окружності. Створювана дуга буде частиною заданого кола. Аргументи startAngle і endAngle представляють собою початкову і кінцеву точку дуги, відповідно (в радіанах). Аргумент anticlockwise має тип Boolean. Якщо цей аргумент має значення true, то малювання дуги здійснюється проти годинникової стрілки; якщо він має значення false, то малювання дуги здійснюється за годинниковою стрілкою.

Щоб намалювати коло за допомогою методу arc () надайте початкового кутку значення 0, а кінцевому кутку - значення 2 * PI, як показано нижче.

context.arc (centerX, centerY, radius, 0, 2 * Math.PI, false);

Щоб намалювати півколо за допомогою методу arc () надайте початкового кутку значення startingAngle + PI, як показано нижче.

context.arc (centerX, centerY, radius, startingAngle, startingAngle + Math.PI, false);

квадратична крива

Квадратична крива створюється за допомогою методу quadraticCurveTo (), як показано нижче. Квадратична крива задається точкою контексту, контрольної точкою і кінцевою точкою. Контрольна точка задає кривизну кривої.

context.moveTo (x, y); context.quadraticCurveTo (controlX, controlY, endX, endY);

крива Безьє

Крива Безьє має початкову і кінцеву точки, як і квадратична крива, але на відміну від неї має дві контрольні точки.

context.moveTo (x, y); context.bezierCurveTo (controlX1, controlY1, controlX2, controlY2, endX, endY);

Крива Безьє створюється за допомогою методу bezierCurveTo (). Оскільки крива Безьє задається двома контрольними точками, а не однієї, вона дозволяє створювати більш складні вигини.

На малюнку 4 показані (зліва направо): дуга, квадратична крива, крива Безьє, півколо і коло.

Малюнок 4. Дуга, криві і коло

Зображення на малюнку 4 було створено за допомогою коду, показаного в лістингу 3.

Лістинг 3. Код для дуги, кривої і кола
<! DOCTYPE HTML> <html> <head> <title> Arcs, Curves, Circles, & Semicircles </ title> <style> body {margin: 0px; padding: 0px; } #MyCanvas {border: 1px solid # 9C9898; } </ Style> <script> function drawArc () {var canvas = document.getElementById ( "myCanvas"); var context = canvas.getContext ( "2d"); var centerX = 100; var centerY = 160; var radius = 75; var startingAngle = 1.1 * Math.PI; var endingAngle = 1.9 * Math.PI; var counterclockwise = false; context.arc (centerX, centerY, radius, startingAngle, endingAngle, counterclockwise); context.lineWidth = 10; context.strokeStyle = "black"; context.stroke (); }; function drawQuadratic () {var canvas = document.getElementById ( "myCanvas"); var context = canvas.getContext ( "2d"); context.moveTo (200, 150); var controlX = 288; var controlY = 0; var endX = 388; var endY = 150; context.quadraticCurveTo (controlX, controlY, endX, endY); context.lineWidth = 10; context.strokeStyle = "black"; context.stroke (); }; function drawBezier () {var canvas = document.getElementById ( "myCanvas"); var context = canvas.getContext ( "2d"); context.moveTo (350, 350); var controlX1 = 440; var controlY1 = 10; var controlX2 = 550; var controlY2 = 10; var endX = 500; var endY = 150; context.bezierCurveTo (controlX1, controlY1, controlX2, controlY2, endX, endY); context.lineWidth = 10; context.strokeStyle = "black"; context.stroke (); }; function drawCircle () {var canvas = document.getElementById ( "myCanvas"); var context = canvas.getContext ( "2d"); var centerX = 450; var centerY = 375; var radius = 70; context.beginPath (); context.arc (centerX, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle = "# 800000"; context.fill (); context.lineWidth = 5; context.strokeStyle = "black"; context.stroke (); }; function drawSemicircle () {var canvas = document.getElementById ( "myCanvas"); var context = canvas.getContext ( "2d"); var centerX = 100; var centerY = 375; var radius = 70; var lineWidth = 5; context.beginPath (); context.arc (centerX, centerY, radius, 0, Math.PI, false); context.closePath (); context.lineWidth = lineWidth; context.fillStyle = "# 900000"; context.fill (); context.strokeStyle = "black"; context.stroke (); }; window.onload = function () {drawArc (); drawQuadratic (); drawBezier (); drawCircle (); drawSemicircle ()} </ script> </ head> <body> <canvas id = "myCanvas" width = "600" height = "500"> </ canvas> </ body> </ html>

Методи translate (), scale () і rotate () змінюють поточний стан зображення. Метод translate (x, y) переміщує об'єкти на Canvas в іншу точку координатної сітки. У методі translate (x, y) координати (x, y) позначають, відповідно, кількість пікселів, на яке слід перемістити зображення в напрямку x, і кількість пікселів, на яке слід перемістити зображення в напрямку y.

Якщо в точці (15,25) ви малюєте зображення за допомогою методу drawImage (), то можете використовувати метод translate () з аргументами (20,30), який поміщає це зображення в точку (15 + 20, 25 + 30) = ( 35, 55).

Метод scale (x, y) змінює розміри зображення. Аргумент x задає коефіцієнт масштабування по горизонталі, а аргумент y задає коефіцієнт масштабування по вертикалі. Наприклад, метод scale (1.5, .75) створить зображення, яке по координаті x буде більше вихідного зображення на 50%, а по координаті y складе лише 75% від розміру початкового зображення. Метод rotate (angle) повертає об'єкт на заданий кут.

На малюнку 5 показаний результат застосування методів translate (), scale () і rotate ().

Малюнок 5. Використання перетворень

У лістингу 4 показаний код, за допомогою якого було створено зображення на малюнку 5.

Лістинг 4. Код для створення перетворень
<! DOCTYPE HTML> <html> <head> <Title> Transformations Example </ title> <script> window.onload = function () {var canvas = document.getElementById ( "myCanvas"); var context = canvas.getContext ( "2d"); var rectWidth = 250; var rectHeight = 75; // translate context to center of canvas context.translate (canvas.width / 2, canvas.height / 2); // half the y component context.scale (1,0.5); // rotate 45 degrees clockwise context.rotate (-Math.PI / 4); context.fillStyle = "blue"; context.fillRect (-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight); // flip context horizontally context.scale (-1,1); context.font = "30pt Calibri"; context.textAlign = "center"; context.fillStyle = "# ffffff"; context.fillText ( "Mirror Image", 3,10); } </ Script> </ head> <body> <canvas id = "myCanvas" width = "400" height = "400"> </ canvas> </ body> </ html>

градієнти

Градієнт - це заливка, яка переходить від одного кольору до іншого, здійснюючи змішування кольорів в зонах їх перетину. Canvas підтримує градієнти двох типів: лінійний і радіальний.

Лінійний градієнт реалізується за допомогою методу createLinearGradient (). Метод createLinearGradient (x0, y0, x1, y1) створює градієнт вздовж прямої лінії, що задається двома точками: (x0, y0) і (x1, y1), які є початковим і кінцевим пунктом градієнта, відповідно. Цей метод повертає об'єкт.

Колірної градієнт здатний охоплювати безліч квітів. Метод addcolorStop (offset, color) задає стоп-колір (color-stop), до якого вказаний колір повинен градиентно змінюватися з заданим офсетом (offset). Метод addColorStop () дозволяє задати офсет від 0 до 1, де починається перехід до наступного кольору. Значення 0 - це офсет на одному кінці градієнта; значення 1 - це офсет на іншому кінці градієнта. Після завдання колірного градієнта градієнтний об'єкт може бути призначений методу fillStyle (). Метод fillText () дозволяє малювати текст з градієнтним зміною кольору.

Радіальний градієнт -createradialGradient (x0, y0, r0, x1, y1, r1) - поєднує два кольори або більше в круговому або конічному шаблоні за допомогою шести аргументів:

  • (x0, y0). Центр першої окружності конуса.
  • r0. Радіус першої окружності.
  • (x1, y1). Центр другий окружності конуса.
  • r1. Радіус другий окружності.

На малюнку 6 показано чотири градієнта: лінійний градієнт, градієнт тексту, лінійний діагональний градієнт і радіальний градієнт.

Малюнок 6. Приклади градієнтів

Зображення на малюнку 6 було створено за допомогою коду, показаного в лістингу 5.

Лістінг 5. Приклад коду для формирование градієнта
<! Doctype> <html> <head> <title> Gradient Example </ title> <script> window.onload = function () {var canvas = document.getElementById ( "myCanvas"); var context = canvas.getContext ( "2d"); // Let's try the gradient on a rectangle // Create a linear gradient var fillColor = context.createLinearGradient (50,50, 150,50); // Set gradient colors fillColor.addColorStop (0.15, "red"); fillColor.addColorStop (0.35, "black"); fillColor.addColorStop (0.65, "green"); fillColor.addColorStop (0.87, "yellow"); // Assign gradient object to fillstyle context.fillStyle = fillColor; // Draw rectangle context.fillRect (50,50,100,100); // With text var fillColorText = context.createLinearGradient (300,50,600,50); fillColorText.addColorStop (0.2, "red"); fillColorText.addColorStop (0.4, "black"); fillColorText.addColorStop (0.6, "green"); fillColorText.addColorStop (0.8, "yellow"); context.fillStyle = fillColorText; context.font = "40px verdana"; context.textBaseline = "top"; context.fillText ( "With text too!", 300,50) // Gradient on a diagonal var fillColordiagonal = context.createLinearGradient (50,200, 100,450); // Gradient colors fillColordiagonal.addColorStop (0.2, "red"); fillColordiagonal.addColorStop (0.4, "black"); fillColordiagonal.addColorStop (0.6, "green"); fillColordiagonal.addColorStop (0.75, "yellow"); // Assign gradient object to fillstyle context.fillStyle = fillColordiagonal; // Draw rectangle context.fillRect (50,225, 100,250); // Draw radial gradient fillColorRadial = context.createRadialGradient (450,300,0, 450,300,200); fillColorRadial.addColorStop (0, "red"); fillColorRadial.addColorStop (0.2, "black"); fillColorRadial.addColorStop (0.4, "green"); fillColorRadial.addColorStop (0.7, "yellow"); context.fillStyle = fillColorRadial; context.rect (300,200,500,400); context.fill (); } </ Script> </ head> <body> <div> <p> <canvas id = "myCanvas" width = "600" height = "400"> </ canvas> </ p> </ div> </ body> </ html>

кадрування зображення

Ви можете змінювати зображення за допомогою кадрування його певних областей. Кадрування в середовищі Canvas забезпечується перевантаженням методу the drawImage (). Метод drawImage () має три опції. Ви можете використовувати конфігурації з трьома, п'ятьма або дев'ятьма аргументами.

Конфігурація з трьома аргументами -drawImage (image, dx, dy) - формує на Canvas зображення з цільовими координатами (dx, dy). Ці координати задають лівий верхній кут результуючого зображення.

Конфігурація з п'ятьма аргументами -drawImage (image, dx, dy, dw, dh) - формує ширину і висоту цільового зображення. Початкове зображення масштабується таким чином, щоб результуюче зображення мало задані ширину і висоту.

Конфігурація з дев'ятьма аргументами -drawImage (image, sx, sy, sw, sh, dx, dy, dw, dh) - обрізає вихідне зображення до прямокутної області з початком в точці з координатами (sx, sy), яка має ширину і висоту ( sw, sh), а потім масштабує його таким чином, щоб результуюче зображення мало ширину і висоту (dw, dh), і поміщає його на Canvas в точку (dx, dy).

На малюнку 7 показано зображення, яке ми піддамо кадруванню.

Малюнок 7. Обрізати зображення

Скористаємося зображенням на малюнку 7 і помістимо кілька зображень на Canvas. Одне з цих зображень збігається за розмірами з Canvas і використовується в якості фону. Друге зображення, що має зменшені розміри, накладається в правій нижній частині Canvas. Третє зображення, що представляє собою вирізану голову Наполеона, накладається в лівому верхньому кутку Canvas. Результуюче кадрувати зображення показано на малюнку 8.

Малюнок 8. Підсумкове кадрувати зображення

Зображення на малюнку 8 було створено за допомогою коду, показаного в лістингу 6. ​​Перед виконанням цього коду не забудьте завантажити зображення Napolean.png , Яке було використано в даному прикладі.

Лістинг 6. Код для кадрування прикладу зображення
<! Doctype> <html> <head> <title> Crop Example </ title> <script type = "text / javascript"> window.onload = function () {var canvas = document.getElementById ( "cropNapolean"); var context = canvas.getContext ( "2d"); var imageObj = new Image (); imageObj.onload = function () {// draw image to cover the entire canvas context.drawImage (imageObj, 0,0, 600, 400); // draw small image in bottom right corner var sourceX = 0; var sourceY = 0; var sourceWidth = 1200; var sourceHeight = 801; var destX = 300; var destY = 200; var destWidth = sourceWidth - 900; var destHeight = sourceHeight - 600; context.drawImage (imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight); // draw Napolean's head only var sourceNapoleanX = 460; var sourceNapoleanY = 25; var sourceNapoleanWidth = 250; var sourceNapoleanHeight = 175; var destNapoleanX = 0; var destNapoleanY = 0; var destNapoleanWidth = sourceNapoleanWidth - 150; var destNapoleanHeight = sourceNapoleanHeight - 100; context.drawImage (imageObj, sourceNapoleanX, sourceNapoleanY, sourceNapoleanWidth, sourceNapoleanHeight, destNapoleanX, destNapoleanY, destNapoleanWidth, destNapoleanHeight); } ImageObj.src = "Napoleon.png"; } </ Script> </ head> <body> <div> <p> <canvas id = "cropNapolean" width = "600" height = "400"> </ canvas> </ p> </ div> </ body> </ html>

Анімація з використанням зображень на кількох тегах Canvas

При створенні анімацій завжди виникає необхідність роботи з шарами. Шари дозволяють ізолювати компоненти, що істотно спрощує кодування і налагодження, а також підвищує ефективність цих операцій. API-інтерфейс Canvas немає шарів, однак ми може створити кілька середовищ Canvas.

Анімація повинна управлятися за часом. Таким чином, для створення анімації необхідно мати доступ до кожного її кадру. Стосовно до анімації API-інтерфейс Canvas має одне суттєве обмеження: після того як зображення намальовано в середовищі Canvas, воно залишається там в незмінному вигляді. Щоб перемістити зображення, необхідно повторно намалювати його.

Для створення анімації виконайте наступні кроки.

  1. Створіть середу Canvas для будь-якої фігури, яка вже була намальована раніше.
  2. Збережіть стан Canvas, щоб гарантувати використання вихідного стану при кожному малюванні кадру.
  3. Виконайте необхідні операції по рендерингу кадрів.
  4. Якщо ви зберегли стан, відновіть його перед малюванням нового кадру.

Управління анімацією може здійснюватися двома способами: за допомогою функції setInterval або за допомогою функції setTimeout, кожна з яких може бути використана для виклику тієї чи іншої функції після закінчення заданого періоду часу. Функція setInterval виконує заданий код багаторазово. Функція setTimeout виповнюється всього один раз після закінчення відведеного періоду часу.

На малюнку 9 показаний один кадр анімації плавця за допомогою декількох середовищ Canvas. Вода знаходиться на одному середовищі Canvas, а плавець знаходиться на іншому середовищі Canvas.

Малюнок 9. Анімація з використанням зображень на кількох тегах Canvas

Плавець створюється за допомогою коду, показаного в лістингу 7. Для створення води використовується лінійний градієнт. Вода має чотири відтінки синього кольору, що забезпечує прийнятну ілюзію води. Рух плавця створюється за допомогою використання значень positionX і positionY, які змінюють позу зображення. Створення голови плавця здійснюється за допомогою методу arc (). Ноги і руки плавця створюються за допомогою малювання ліній і подальшої зміни їх положень з допомогою lineTo (). Зміни тулуба здійснюються за допомогою зміни положення за допомогою moveTo (). Оскільки ми маємо справу з анімацією, то, щоб побачити рух плавця, необхідно виконати даний код.

Лістинг 7. Приклад анімації
<! DOCTYPE HTML> <html> <head> <title> Animation & Multiple Canvas Example </ title> <script> // Water canvas function drawWater () {var canvasWater = document.getElementById ( "myWaterCanvas"); var contextWater = canvasWater.getContext ( "2d"); contextWater.globalAlpha = .50; // Create a linear gradient fill var linearGrad = contextWater.createLinearGradient (0,0,400,400); linearGrad.addColorStop (0, '# 0000ff'); // sets the first color linearGrad.addColorStop (.25, '# 0099ff'); // sets the second color linearGrad.addColorStop (.50, '# 00ccff'); // sets the third color linearGrad.addColorStop (.75, '# 00ffff'); // sets the fourth color contextWater.fillStyle = linearGrad; contextWater.fillRect (0,0,400,400); } // Swimmer canvas setInterval (drawSwimmer, 30); var positionX = 0; var positionY = 0; function drawSwimmer () {var canvasSwimmer = document.getElementById ( "mySwimmerCanvas"); var contextSwimmer = canvasSwimmer.getContext ( "2d"); contextSwimmer.clearRect (0,0,400,400); if (positionX <30) {positionX + = 1; positionY + = 1; } Else {positionX = 0; positionY = 0; } ContextSwimmer.save (); // draw circle for head var centerX = 200; var centerY = 50; var radius = 20; contextSwimmer.beginPath (); contextSwimmer.arc (centerX, centerY + positionY, radius, 0, 2 * Math.PI, false); contextSwimmer.fillStyle = "# 000000"; contextSwimmer.fill (); contextSwimmer.lineWidth = 5; // torso contextSwimmer.beginPath (); contextSwimmer.moveTo (200,70 + positionY); contextSwimmer.lineTo (200,175); contextSwimmer.lineWidth = 10; contextSwimmer.strokeStyle = "# 000000"; contextSwimmer.lineCap = "round"; contextSwimmer.stroke (); // image right arm contextSwimmer.beginPath (); contextSwimmer.moveTo (200, 100); contextSwimmer.lineTo (175-positionX, 140-positionY); contextSwimmer.lineWidth = 10; contextSwimmer.strokeStyle = "# 000000"; contextSwimmer.lineCap = "round"; contextSwimmer.stroke (); // image left arm contextSwimmer.beginPath (); contextSwimmer.moveTo (200, 100); contextSwimmer.lineTo (225 + positionX, 140-positionY); contextSwimmer.lineWidth = 10; contextSwimmer.strokeStyle = "# 000000"; contextSwimmer.lineCap = "round"; contextSwimmer.stroke (); // image right leg contextSwimmer.beginPath (); contextSwimmer.moveTo (200, 175); contextSwimmer.lineTo (190-positionX, 250-positionY); contextSwimmer.lineWidth = 10; contextSwimmer.strokeStyle = "# 000000"; contextSwimmer.lineCap = "round"; contextSwimmer.stroke (); // image left leg contextSwimmer.beginPath (); contextSwimmer.moveTo (200, 175); contextSwimmer.lineTo (210 + positionX, 250-positionY); contextSwimmer.lineWidth = 10; contextSwimmer.strokeStyle = "# 000000"; contextSwimmer.lineCap = "round"; contextSwimmer.stroke (); contextSwimmer.restore (); }; </ Script> </ head> <body onload = "drawWater ();"> <canvas id = "myWaterCanvas" width = "400" height = "400" style = "z-index: 2; position: absolute; left : 0px; top: 0px; "> </ canvas> <canvas id =" mySwimmerCanvas "width =" 400 "height =" 400 "style =" z-index: 1; position: absolute; left: 0px; top: 0px ; "> </ canvas> </ body> </ html>

Висновок

HTML5-тег Canvas грає центральну роль при створенні RIA-додатків на базі браузерів. Він надає практичну середу малювання, що базується на технології JavaScript і обмежену лише уявою розробника. Це середовище не дуже складна для освоєння. Крім того, в Інтернеті є безліч інструментів підтримки, що полегшують навчання і підготовку, включаючи інструкції щодо використання пам'яті блоги, онлайнові статті, відео-та текстові посібники, типові додатки.

Можливість змінювати тексти та зображення в візуальному режимі і імітувати рух робить Canvas виключно цінним інструментом. Незалежно від того, чи застосовуєте ви Canvas як дизайнер або розробник, чи використовуєте ви Canvas при побудові ігрових додатків для мобільних пристроїв або просто хочете поліпшити використання робочої поверхні екрану, - в будь-якому випадку Canvas є найважливішим компонентом можливостей, що надаються специфікацією HTML5.

Ресурси для скачування

Схожі тими

  • Оригінал статті: HTML5 fundamentals, Part 4: The final touch .
  • Create great graphics with the HTML5 canvas (Створення вражаючих графічних матеріалів за допомогою HTML5 Canvas, developerWorks, лютий 2011 р.) Керівництво по розробці графічних прийомів і процесів.
  • демонстрація Canvas Pixel Manipulation від організації Safari Dev Centerthat - прекрасний приклад використання Canvas для створення ефективних візуальних активів.
  • розділ HTML Living Standard на сайті організації WHATWG дозволяє ознайомитися зі станом розробки специфікацій HTML5 Canvas.
  • довідник HTML5 Canvas на сайті W3Schools.com містить кілька корисних вправ, які допомагають поглибити знання з Canvas.
  • Керівництво по Canvas на ресурсі MDN Docs - відмінне базове керівництво, що відбиває досвід розробки організації Mozilla.
  • Let's Call It A Draw (ing Surface) - інноваційне керівництво по базовим концепціям HTML5-тега Canvas.
  • Dojo Toolkit - це бібліотека JavaScript-модулів з відкритим вихідним кодом, яка допомагає швидко розробляти межплатформенному додатки і Web-сайти на базі JavaScript / Ajax.

Підпішіть мене на ПОВІДОМЛЕННЯ до коментарів

Com/developerworks/ru/opensource/library/?

Уважаемые партнеры, если Вас заинтересовала наша продукция, мы готовы с Вами сотрудничать. Вам необходимо заполнить эту форму и отправить нам. Наши менеджеры в оперативном режиме обработают Вашу заявку, свяжутся с Вами и ответят на все интересующее Вас вопросы.

Или позвоните нам по телефонам: (048) 823-25-64

Организация (обязательно) *

Адрес доставки

Объем

Как с вами связаться:

Имя

Телефон (обязательно) *

Мобильный телефон

Ваш E-Mail

Дополнительная информация: