Хочу привести простой пример использования возможностей рисования и анимации с помощью HTML5. Собственно, то, что получится в итоге, вы можете наблюдать чуть выше (разумеется, если вы не отключили JavaScript). Для того, что бы получить такой результат - будем использовать элемент canvas, который включен в спецификацию HTML5, и предназначен для рисования.
Первым делом нужно создать страницу и поместить на нее элемент canvas:
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="200"></canvas> <script> </script> </body> </html>
По умолчанию, размер области для рисования элемента canvas - 300px x 150px. Поскольку нам хватит и меньше - задаем размер 200px x 200px. Теперь нужно написать скрипт, который будет рисовать нашу новогоднюю елку. Соответственно, весь дальнейший код добавим в тег <script> на только что созданной странице. Начнем с рисования самой елки: