Розробка HTML5 додатку для візуалізації та маніпуляції сітками елементів

Атрибут id не є специфічний для елемента <canvas>, але є одним з атрибутів HTML за замовчуванням, і може бути застосований майже до всіх елементів HTML (також як class, наприклад). Завжди визначати id елемента – гарна ідея, тому що це значно спрощує ідентифікацію його в нашому скрипті.

Стиль елемента <canvas> може налаштовуватися також, як і звичайне зображення через CSS (margin, border, background, і т. п.). Ці правила, проте, не впливають на саме малювання в canvas. Якщо ніякі налаштування стилю не задані, canvas буде створений повністю прозорим.

Аварійний стан

У зв'язку з тим, що елемент <canvas> відносно новий, і не реалізований в деяких браузерах (таких як Firefox 1. 0 та Internet Explorer), нам необхідно надати якийсь аварійний вміст елементу, якщо браузер цей елемент не підтримує.

Це дуже просто: ми всього-лише надаємо альтернативний вміст всередині елемента canvas. Браузери, які не підтримують <canvas>, проігнорують контейнер і оброблять аварійний вміст всередині нього. Браузери ж, що підтримують <canvas>, проігнорують вміст контейнера і нормально оброблять canvas.

Приміром, ми можемо видати текстовий опис вмісту canvas, або показати статичну картинку замість динамічно намальованого вмісту. Це може виглядати приблизно так:

<canvas id=«photo» width=«150» height=«150»>

Використовуйте сучасніший браузер!

</canvas>

Або

<canvas id=«photo» width=«150» height=«150»>

<img src=«images/photo. jpg» width=«150» height=«150/>

</canvas>

<canvas> створює поверхню для малювання, яка надає один або більше контекстів для відтворення, який використовується для створення відображуваного контенту і маніпуляцій з ним. Ми сфокусуємо на 2D (двомірному) контексті відтворення, який в наш час є єдиним певним контекстом. У майбутньому інші контексти зможуть підтримувати інші види відтворення: наприклад, цілком ймовірно, що буде додано 3D контекст, заснований на OpenGL ES.

<canvas> спочатку порожній, і для того, щоб що-небудь відобразити, скрипту необхідно отримати контекст відтворення і малювати вже на ньому. Елемент canvas має DOM-метод, званий getContext, і призначений для отримання контексту відтворення разом з його функціями малювання. getContet () приймає один параметр – тип контексту

var canvas = document. getElementById ('tutorial') ;

var ctx = canvas. getContext ('2 d ') ;

 Першим рядком ми отримуємо DOM-вузол нашого canvas, використовуючи метод getElementById. А отримати доступ до контексту малювання ми можемо методом getContext.

У HTML5 визначений елемент <canvas> як «растрове полотно, який може бути використаний для відображення діаграм, ігрової графіки або зображень на льоту». Полотно це прямокутна область на вашій сторінці, де за допомогою JavaScript можна малювати що побажаєте.

Як же це полотно виглядає? Насправді, ніяк. У тега <canvas> немає власного контенту та рамки.

Код виглядає так.

<canvas width=«150» height=«300»> </ canvas>

height – Задає висоту полотна. За замовчуванням 300 пікселів. width – Задає ширину полотна. За замовчуванням 150 пікселів.

Давайте додамо пунктирну рамку, щоб побачити, з чим ми маємо справу.

Полотно з рамкою

У вас може бути декілька елементів <canvas> на одній сторінці. Кожене полотно буде відображатися в DOM і зберігати свій власний стан. Якщо ви додасте кожному полотну атрибут id, то можете отримати до них доступ, як і до будь-якого іншого елементу.

Розширимо наш код, включивши атрибут id.

<canvas id=«a» width=«300» height=«225»> </ canvas>

Тепер легко можна виявити елемент <canvas> в DOM.

var a_canvas = document. getElementById («a») ;

Подія onclick викликає цю функцію:

function draw_b () {

var b_canvas = document. getElementById («b») ;

var b_context = b_canvas. getContext («2d») ;

b_context. fillRect (50, 25, 150, 100) ;

Перший рядок функції не робить нічого особливого, вона просто знаходить елемент <canvas> в DOM.

function draw_b () {

var b_canvas = document. getElementById («b») ;

var b_context = b_canvas. getContext («2d») ;

b_context. fillRect (50, 25, 150, 100) ;

Кожне полотно має контекст малювання. Як тільки ви знайшли елемент <canvas> в DOM (за допомогою document. getElementById () або будь-яким іншим засобом), викликаєте метод getContext (). Необхідно зазначити рядок «2D» в методі getContext ().

Отже, у вас є елемент <canvas> і є контекст малювання, де визначені методи і властивості малювання. Мається ціла група властивостей і методів присвячених малювання прямокутників.

Властивість fillStyle може бути кольором, малюнком або градієнтом (докладніше про градієнтах трохи нижче). За замовчуванням fillStyle заливає суцільним чорним кольором, але ви можете встановити будь-що. Кожен контекст малюнка пам'ятає свої власні властивості при відкритті сторінки, поки ви її не поновіть.

fillRect (x, y, width, height) малює прямокутник, заповнений поточним стилем заливки.

Властивість strokeStyle як і fillStyle може бути кольором, малюнком або градієнтом.

strokeRect (x, y, width, height) малює прямокутник з поточним стилем лінії. strokeRect не заливати всередині, він просто малює кордону.

clearRect (x, y, width, height) видаляє пікселі у вказаному прямокутнику.

HTML5 – безсумнівний тренд. Причому, не стільки нова специфікація з новими тегами, скільки гармонійне і могутнє поєднання HTML + CSS + JS, витончено втирає носа Flash.

Вже зараз можна спостерігати красиві