Вот такой короткий заголовок, и тем не менее в нем я ухитрился соврать. В 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. Есть тени!
Добавить комментарий