Pull to refresh

Еще одно Canvas руководство [2]: Стилизация, градиенты, тени

Reading time 4 min
Views 12K

Введение


В предыдущей части мы рассмотрели как работать с путями, но рисовать только черным цветом не в радость именно поэтому в этой части самым первым мы рассмотрим как разукрасить наш холст, затем рассмотрим как стилизовать линии, далее научимся работать с тенями, потом научимся работать с градиентами и напоследок разберемся как работать с так называемыми шаблонами.


Сделаем наш холст разноцветным



Как вы уже заметили в canvas есть два типа операции отрисовки fill и rect и у каждого есть свои настройки стилей. Для их изменения нужно менять свойства контекста fillStyle и strokeStyle, эти свойства в качестве значения могут принимать не только цвета, но и другие значения которые мы рассмотрим позже. А сейчас мы рассмотрим как поменять цвет. Для этого нужно просто присвоить свойствам fillStyle и strokeStyle новый значения, в случае с цветами это будут строки, при этом canvas поддерживает следующие схемы описания цветов: orange, #FFA500, rgb(255,165,0), rgba(255,165,0,1).
Для примера нарисуем разноцветный круг, оставим в нашем скрипте только получение контекста, а затем добавим следующий код:
for(var i=0;i<6;i++){
    ctx.fillStyle = 'rgb(' + Math.round(Math.random()*255) + ',' + Math.round(Math.random()*255) + ',' + Math.round(Math.random()*255) +')'
    ctx.beginPath()
    ctx.arc(300,300,70,Math.PI/3*i,Math.PI/3*(i+1),false)
    ctx.lineTo(300,300)
    ctx.fill()
}

Как внимательный читатель догадался, этот код нарисует круг состоящий из 6 сегментов с произвольными цветами.

Поработаем с линиями


Мы также можем изменить некоторые параметры у линий для этого существует несколько свойств, давайте рассмотрим по порядку каждое из них.

Изменяем ширину линии


Значение ширины линии хранится в свойстве lineWidth контекста canvas и одна единица соответствует одному пикселю. Значение по умолчанию естественно 1.0

Стиль верхушки линий



Стиль верхушки линии хранится в свойстве lineCap и для него существует три возможных значение: butt, round, sqare, стилем по умолчанию является butt.






Стиль соединения линий



Стиль соединения линий хранится в свойстве lineJoin и может принимать три возможных значение: miter, round, bevel, стилем по умолчанию является miter.

Еще немного о miter


Мы можем ограничить длину огромного хвоста miter с помощью свойства miteLimit которое по умолчанию принимает значение 10.

Отбросим тени



Если быть точным то тени canvas отбрасываются всегда, просто они отбрасываются с нулевым смещением и нулевым размытием. Долго рассматривать тени не стоит так как тут все предельно ясно, есть четыре свойства управляющие тенями (через знак равно указаны стандартные значения):
shadowOffsetX = 0.0
shadowOffsetY = 0.0
shadowBlur = 0.0
shadowColor = "transparent black"

Для примера отбросим две тени на друг друга в ограниченной области рисования и посмотрим что произойдет:
ctx.beginPath()
ctx.arc(200,300,70,0,Math.PI*2,true)
ctx.stroke()
ctx.clip()

ctx.shadowOffsetX = -10
ctx.shadowOffsetY = -10
ctx.shadowBlur = 2
ctx.shadowColor = 'black'

ctx.beginPath()
ctx.moveTo(100,320)
ctx.lineTo(500,320)
ctx.moveTo(500,180)
ctx.lineTo(100,370)
ctx.stroke()


Используем градиенты


Как в прошлой части мы рассмотрели пути так и в этой мы рассмотрим градиенты.

Линейные градиенты



Создание объекта градиента


createLinearGradient(float x1, float y1, float x2, float y2)
— создаст объект линейного градиента проходящего из точки (x1;y1) в точку (x2;y2), добавим в наш код строку:
var gr = ctx.createLinearGradient(0,0,150,150)

Добавляем цвета в градиент


addColorStop(float offset, string color)
— добавит в наш градиент цвет color с отступом offset который принимает значения от 0 до 1.
Добавим в наш скрипт строки:
gr.addColorStop(0.0,'blue')
gr.addColorStop(0.5,'red')
gr.addColorStop(1.0,'green')

Применим градиент как стиль заливки


Свойство fillStyle контекста canvas может принимать в качестве значения не только цвет, но и градиент, добавим в скрипт строку:
ctx.fillStyle = gr

Финальный шаг, рисуем залитый прямоугольник


Добавим в наш скрипт последнюю строку:
ctx.fillRect(0,0,150,150)


Радиальные градиенты



При работе с радиальными градиентами отличие от линейных заключается только в создании.
createRadialGradient(float x1, float y1, float r1, float x2, float y2, float r2)
— создаст радиальный градиент с плавным переходом цвета из окружности с центром в точке (x1;y1) и радиусом r1 в окружность с центром точке (x2;y2) и радиусом r2. Для примера нарисуем шарик и сделаем псевдо-освещение:
ctx.shadowOffsetX = 10
ctx.shadowOffsetY = 15
ctx.shadowBlur = 10
ctx.shadowColor = '#0F0'

var gr = ctx.createRadialGradient(60,60,15,75,75,75)

gr.addColorStop(0.0,'#0F0')
gr.addColorStop(1.0,'#0DA805')

ctx.fillStyle = gr

ctx.beginPath()
ctx.arc(75,75,75,0,Math.PI*2,false)
ctx.fill()


Используем шаблоны


Кроме цветов и градиентов fillStyle и strokeStyle в качестве значения могут принимать и так называемые шаблоны, шаблоны можно сделать из того же самого canvas элемента, изображения или видео. Для примера будем использовать изображение. Шаблон создается методом createPattern(object any, string repeat), repeat может принимать следующие значения:«repeat»,«repeat-x»,«repeat-y»,«no-repeat». Значением по умолчанию является «repeat». Для примера запустим следующий скрипт:
var img = new Image()
img.src = 'brick.jpg'

var ptr = ctx.createPattern(img,'repeat')
ctx.fillStyle = ptr;

ctx.fillRect(50,50,100,100)
Tags:
Hubs:
+50
Comments 14
Comments Comments 14

Articles