Использование примитивов

Вот такой короткий заголовок, и тем не менее в нем я ухитрился соврать. В canvas API нет примитивов. Есть примитив. Один. И мы его уже рассмотрели во вступительном примере.

Рис. 30. Hello Canvas!

Да, это квадрат, вернее прямоугольник, впрочем, рассмотрели мы его недостаточно подробно. Исправим это у пущение, разобрав следующую композицию:

$(function(){

Var canvas = document. getElementById(«myCanvas»); var context = canvas. getContext(«2d»); context. fillStyle = «violet»; context. fillRect(25,25,150,150): context. strokeStyle = «gray»; context. lineWidth = 6;

Context. strokeRect(150,150,150,150): context. clearRect(100,100,150,150);

});

Результат мы можем видеть на рис. 31. Тут первый квадрат нарисован вполне традиционным способом и нам уже не интересен. Для второго потребовались два дополнительных параметра. Это strokeStyle, позволяющий указать цвет разливки контура фигуры, и lineWidth — толщина этого контура в пикселях (все подобные свойства следует применять до отрисовки фигуры). Самое важное тут сам метод, рисующий квадрат, — strokeRect(), представляющий второй способ рисования фигур в Canvas API — отрисовки контура. Ну а метод clearRect() попросту очищает прямоугольный регион, в соответствии с заданными границами, от любой графики.

Рис. 31. Рисуем квадраты

Попробуем чуть оживить картинку, применив к первому квадрату градиентную заливку. Для этого сначала создаем объект градиента:

Context. fillStyle = «violet»;

Var gradient = context. g reateLinearGradient(25,25,200,200):

Градиент в Canvas API бывает линейный и радиальный. Что это такое? А что такое градиент вообще? Определим его как постепенное изменение цвета вдоль заданного направления. В случае линейного градиента (который мы задали) это прямая линия (ось градиента).

Все, что нам нужно для задания градиента, — указать начальную точку и ограничивающие цвета. Аргументами метода createLinearGradient являются координаты начальной и конечной точек оси градиента (в нашем примере они совпадают с противоположными углами квадрата). Затем методом addColorStop() добавим начальный и конечный цвета:

Gradient. addColorStart(0,’#0ff’); gradient. addColorStop(1,’#f00′);

Теперь используем наш градиент в качестве стиля заливки:

Context. fillStyle = gradient; context. fillRect(25,25,150,150)

Радиальный градиент чуть сложнее. Применим его ко второму квадрату:

Gradient = context. createRadialGradient(200,200,0,200,200,120):

Gradient. addColorStop(0,’#0F2′);

Gradient. addColorStop(1,’#07f’);

Context. fillStyle = gradient;

Context. fillRect(150,150,150,150);

Аргументами для этого метода служат координаты центров двух окружностей и их радиусы. В приведенном примере центры окружностей совпадают, создавая впечатление размытого пятна на фигуре. Советую самостоятельно «поиграть» с параметрами, подобрав нужный эффект.

Результат применения обоих типов градиентов — на рис. 32.

Рис. 32. Линейный и радиальный градиент

Добавим еще один распространенный «украшательный» элемент — тени. Ну действительно, куда без теней в мире современной деловой графики? Я честно не знаю, зачем они нужны, но, судя по их обилию в разных презентационных материалах, без теней просто ничего не работает! В общем, не будем выбиваться из тренда, вставим в сценарий отрисовки квадратов следующий код:

Var canvas = document. getElementById(”myCanvas”); var context = canvas. getContext(”2d”);

Context. shadowColor = ‘#CCCCCC’; context. shadowBlur = 25; context. shadowOffsetX = 25; context. ihadowOffsetY = 25; context. fillStyle = «violet»;

Сначала мы задаем цвет тени, затем процент размытия. Команды shadowOffsetX и shadowOffsetY обеспечивают смещение затененной области по двум осям координат. Результат — на рис. 33.

Рис. 33. Есть тени!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *