Введение в HTML5 Canvas

Сегодня будем пробовать рисовать градиент на canvas'е в HTML5

Уверен, реализация полотна в HTML5 не имеет существенных отличий от реализаций в Delphi и C++Builder

Но согласитесь, простой градиент - не очень интересно, попробуем его разнообразить..

 

Когда я впервые услышал о html5 - первая из мыслей, что посетила меня, звучала примерно так:

 

 

Но, как оказалось, главная цель html5 - облегчить работу разработчикам и заменить привычный "программистам-мазохистам" flash , тем самым избавив нас от извращений с интеграцией audio/video плееров и т.д.

 

Убедиться в этом можно посмотрев на структуру html5 страницы:

Первое, что бросается в глаза - объявление типа документа:

� это не сокращенная запись, а полноценное объявление типа документа html5!

теперь не нужно тратить время, чтоб определиться каким будет тип документа.

а их не мало:

 

Для уверенности тип документа html5 можно задать следующим образом:

Почему? Очевидно этого требует "всеми любимый" IE6

 

Самое прекрасное заключается в том, что html5 объединяет прелести всех типов web-документов.

 

Перейдем к Canvas:

 

Объявить его можно следующим способом:

 

Я выбрал разрешение 1024x480, т.к. это очень удобно на 15-дюймовом мониторе.

 

Определим стиль BODY, пусть фон будет темно-серым, а цвет текста светло-красным.

� сразу "прикрутим" функцию рисования к событию onload, пусть она называется loader():

 

 

 

Все что нам потребуется - двойной цикл с выводом 3-х квадратов и заменой цвета во внутреннем квадрате на каждой итерации:

� следующие методы:

 

fillStyle - тип/цвет заливки

fillRect(X, Y, WIDTH, HEIGHT)- заливка указанной прямоугольной области

Math.round - Округление чисел с плавающей запятой до целого числа

 

Объявляем необходимые переменные:

Выводим черные квадраты:

Результат: (картинки кликабельны)

 

Внутри черных рисуем синие:

� сам градиент:

 

Вот что получилось в итоге:

 

�сходник: