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

    Введение


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


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



    Как вы уже заметили в 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)
    
    Поделиться публикацией

    Похожие публикации

    Комментарии 14
      +2
      Спасибо! Всё описано понятно и просто!
        +1
        Добавьте, что тени являются глобальным свойством, и если их явно не отключить после отрисовки объекта с тенью, все остальные тоже будут с тенью.
          +2
          По сути достаточно каждый метод, который изменяет глобальные настройки оборачивать в save-restore. Это своего рода паттерн.
            +1
            Да, хороший вариант!
              +1
              А можно пример по save-restore? А то сейчас полчаса переставлял блок с настройками тени, пока не получил то, что хотел (перекрытия получались).

              Если я правильно понимаю это будет как-то так:
              ctx.save();
              
              ctx.shadowColor = "#000";
              ctx.shadowBlur = 10;
              ctx.shadowOffsetX = 5;
              ctx.shadowOffsetY = 5;
              
              ctx.restore();
                –1
                Ну, приблизительно, как-то так:

                ctx.save();
                
                ctx.shadowColor = "#000";
                ctx.shadowBlur = 10;
                ctx.shadowOffsetX = 5;
                ctx.shadowOffsetY = 5;
                
                ctx.fillText('text', 100, 100);
                
                ctx.restore();
                
                ctx.fillText('text', 100, 200); // уже без стилей
                
            +1
            Есть информация какими браузерами на данный момент поддерживается канвас (с учетом хаков)?
              +1
              Конечно же информации вообще нет
              Ну вот совсем нет
                +3
                Я не претендовал на оригинальный комментарий, просто хотел поинтересоваться у специалистов в этом деле, но как всегда заминусовали.

                За ссылки спасибо.
                +2
                Спасибо! Моя куча закладок, с каждым вашим постом уменьшается!
                  +9
                  Эх, не прошло и 25 лет и опять
                  10 PLOT 10,10
                  20 LINE 40,50
                  30 CIRCLE 30,30,40
                  

                  :) Только на более высоком уровне

                  P.S. Поправьте «Радиальные градиенты градиенты» — думаю с первого раза понятно :)
                    +1
                    Угу, всё развивается по спирали.
                      +1
                      просто выросло поколение, никогда не видевшие бейсика =)
                      0
                      Стилизация — это имитация или подражание.
                      Вы говорите про «оформление». Слова «styling» и «стилизация» — разные.

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

                      Самое читаемое