Ймовірно, найбільшим обмеженням є те, що коли фігура намальована, її вже не можна рухати. Щоб зобразити рух нам потрібно перемалювати фігуру і все, що було намальовано до неї. Перемальовування складних кадрів займає багато часу, і продуктивність сильно залежить від швидкості комп'ютера, на якому вона виконується.
Нижче перераховані необхідні кроки для того, щоб намалювати кадр:
- Очистити canvas
Якщо фігура, яку ви збираєтеся намалювати, не займає всю площу canvas (як фон, наприклад), то все що було намальовано раніше необхідно стерти. Найпростіше це зробити за допомогою методу clearRect (). - Зберегти початковий стан canvas
Якщо ви змінюєте будь-які настройки (такі як стилі, трансформації і т.п.), які зачіпають стан canvas і ви хочете переконатися, що оригінальне стан використовується кожен раз, коли був відмалювали кадр, то вам слід зберегти це оригінальне стан. - Намалювати анімовані фігури
Крок на якому ви власне отрісовиваємих кадр. - Відновити стан canvas
Якщо ви зберігали стан, відновіть його, перш ніж малювати новий кадр.
управління анімацією
Фігури отрісовиваємих на canvas або безпосередньо - за допомогою методів canvas, або за допомогою сторонніх функцій. У нормальній ситуації результат стане видно на canvas після закінчення виконання скрипта. Наприклад, цикл for використовувати для анімації можна.
Це означає, потрібен спосіб виконання функцій відтворення через інтервали часу. Є два способи для управління такою анімацією.
заплановані поновлення
Перший - це функції window.setInterval (). window.setTimeout (). і window.requestAnimationFrame (). які можуть бути використані для виклику деякої функції, через заданий проміжок часу.
setInterval (function, delay) Починає періодично виконувати функцію function кожні delay мілісекунд. setTimeout (function, delay) Executes the function specified by function in delay milliseconds. requestAnimationFrame (callback) Tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint.
If you do not want any user interaction you can use the setInterval () function which repeatedly executes the supplied code. If we wanted to make a game, we could use keyboard or mouse events to control the animation and use setTimeout (). By setting EventListener s, we catch any user interaction and execute our animation functions.
An animated solar system
This example animates a small model of our solar system.