Продуктивність.
Собсно, ось. Пошаманити, можна досягти 900+ FPS. Відгадка в тестовій версії Opera 11.50 з GPU прискоренням. Тобто, продуктивність на хорошому рівні, і буде рости з розвитком технологій.
Методи і властивості можна подивитися тут.
Малювання.
Зазначу, що набір малювання мінімальний, тільки необхідні базові речі. З фігур це: дуга, прямокутник, лінії, криві. Наприклад, щоб намалювати коло, потрібно намалювати замкнуту дугу.
Для обертання намальованою фігури, ви повинні повернути весь полотно (прямого способу повернути фігуру немає), намалювати потрібну фігуру і потім повернути полотно назад. Ви можете також зміщати початкові координати полотна. Є методи для збереження положення полотна і повернення його до збереженого стану. Є підтримка відображення тексту, додавання зображень.
Метод clearRect () очищає прямокутну область полотна.
Треба сказати, що API не зовсім зручно - параметрів у методу може бути і 9 штук:
розбиратися в такому коді, звичайно, не дуже приємно. Имхо, куди зручніше було б передавати об'єкт:
Цю проблему вирішують фреймворки, огляд їх наводити не буду, самі погуглити, якщо потрібно, або напишіть свій.
Анімація.
Напевно, найбільша важлива і цікава сторона canvas'а.
Якщо ви робили анімацію c допомогою Adobe Flash, то пам'ятайте, що можете просто змінювати положення об'єкта на сцені або його зовнішній вигляд, змінюючи відповідні параметри. Тут же доведеться перемальовувати все заново, тобто, наприклад, для анімації руху, вам кожен кадр потрібно очищати старе положення і малювати нове.
Так як є нативна підтримка малювання всього зображення або тільки певної його області - анімація на спрайт реалізовується просто і швидко.
Очищення всього полотна за допомогою clearRect () - дорогий процес, і якщо ви будете чистити весь полотно кожен кадр, то відразу ж впретеся в питання продуктивності. Тому, головне правило тут - перемальовувати тільки те, що змінилося. Популярним рішенням є накладення декількох прозорих полотен один на одного, для відтворення статичних елементів на задньому полотні і часто змінюються на передньому. Знову ж, фреймворки можуть послужити вам добрими помічниками в цьому, але можуть і навпаки робити зайві очищення полотна при неправильному використанні.
3D.
Так, можна малювати і в 3D. У мережі є безліч прикладів. Описувати в рамках посту не буду.
Що у мене вийшло.
Подивившись на цей і цей приклади, мені теж захотілося "зааніміровать" якісь дрібні частинки. На наступний день у мене щось вже вийшло, але це жерло до 70% мого процесора, і я взявся за оптимізацію. Відмовившись від обох випробуваних фреймворків, і витративши всі новорічні свята, мені вдалося чогось домогтися. Правда воно вішає геть firefox під ubuntu, при цьому в інших браузерах, в тому числі і в віндового версії ФФ, навантаження цілком прийнятні. Про це, виявилося, написано в багтрекер Мозилли.
P.S. Якщо почитати інтернет, то майже під кожною статтею про canvas - розгорається холівар canvas vs. svg, але я прошу читачів зробити цей пост винятком.