Share via

Как создать градиент (HTML)

  • Статья

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]

Фигуры и линии можно рисовать не только сплошными цветами. Градиент, используемый на полотне, по сути представляет собой тип значения цвета, поэтому его можно применять к свойствам fillStyle и strokeStyle.

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

Градиенты оптимизируют веб-приложения, поскольку позволяют создавать такие эффекты без использования изображений и минимизируют ресурсы полосы пропускания и время, требуемые для загрузки. А создание градиентов путем программирования упрощает их масштабирование и повторное использование.

Необходимые условия

Предполагается, что вы умеете создавать простые приложения Магазина Windows на JavaScript с помощью шаблона из библиотеки Windows для JavaScript. Инструкции по созданию первого приложения Магазина Windows на JavaScript см. в разделе Создание первого веб-приложения. Инструкции по использованию шаблона WinJS см. в разделе Получение и использование набора средств WinJS.

Инструкции

Этап 1: Получение контекста формирования

Прежде чем нарисовать изображение на полотне и раскрасить его с использованием градиента, нужно получить контекст формирования от элемента полотна. Контекст формирования содержит определение всех методов и свойств рисования.

  1. Чтобы повысить производительность приложения Магазина Windows на JavaScript, дождитесь окончания загрузки HTML-страницы, прежде чем выполнять код JavaScript. Для этого вставьте код рисования изображения в функцию, вызываемую после загрузки страницы.

    window.onload = drawGradient;   

function drawGradient() {...

  2. Используйте getElementById для загрузки узла модели DOM полотна, а затем используйте метод getContext для доступа к контексту визуализации.

    Существуют разные типы контекстов прорисовки, позволяющие рисовать разными способами. Например, для 2D-графики используется 2D-контекст, а для 3D-графики используется 3D-контекст. В примере этого раздела используется 2D-контекст.

        // Get the canvas element and specify a 2d drawing context.
    var context = document.getElementById("canvas").getContext("2d");

Этап 2: Создание градиента

Получив контекст формирования, можно определить градиент. Существуют два типа градиентов: линейный, или прямой градиент, и радиальный, или круговой.

Linear gradient

Метод линейного градиента использует четыре аргумента:

createLinearGradient(startX, startY, endX, endY)

Первая группа из двух аргументов — это координаты x и y начала градиента, а вторая группа — координаты x и y окончания градиента.

  • Вертикальный линейный градиент

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

    var myGradient=context.createLinearGradient(0, 0, 200, 0);

    Чтобы создать вертикальный линейный градиент, постепенно затухающий по горизонтали, задана точка начала градиента с координатами (0; 0) и точка окончания с координатами (200; 0). Поскольку координаты по оси y (второй и четвертый параметры) обе равны нулю, то градиент равномерно затухает слева направо.

    Вертикальный градиент.

  • Горизонтальный градиент.

    Чтобы создать градиент, постепенно затухающий сверху вниз, координаты по оси x (первый и третий параметры) должны быть постоянными, а координаты по оси y (второй и четвертый параметры) — меняться от 0 до высоты полотна.

    var myGradient=context.createLinearGradient(0, 0, 0, 100);

    Горизонтальный градиент

  • Диагональный градиент

    Можно также создавать градиенты в диагональном направлении. В данном примере меняются обе координаты — x и y, для которых заданы значения 200 и 100 соответственно.

    var myGradient=context.createLinearGradient(0, 0, 200, 100);

    Диагональный градиент

Radial gradient

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

createRadialGradient(startX, startY, startRadius, endX, endY, endRadius)

Здесь параметрами являются:

  • startX и startY — координаты x и y начальной окружности на полотне.
  • startRadius — радиус начальной окружности.
  • endX и endY — координаты x и y конечной окружности на полотне.
  • endRadius — радиус конечной окружности.

  • Традиционный радиальный градиент

    Чтобы создать "обычный" радиальный градиент, который постепенно становится прозрачным от одной окружности к другой, необходимо задать для координат x/y обеих окружностей одно и то же значение и сделать одну окружность градиента больше другой.

    var myGradient = context.createRadialGradient(52, 50, 10, 52, 50, 200);

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

  • Разные точки начала и окончания

    В предыдущем примере радиального градиента координаты x и y начала и окончания одинаковы (52 и 50 соответственно), а увеличен только радиус каждой окружности с 10 до 200. В результате радиальный градиент постепенно затухает к центру окружности.

    Если разнести точки начала и окончания на большее расстояние друг от друга, то в результате получится конусообразный градиент, растянутый по полотну.

    var myGradient = context.createRadialGradient(32, 30, 5, 60, 60, 50);

    В этом примере координаты x и y начальной окружности равны 32 и 30, а радиус — 5. Координаты x и y конечной окружности равны 60 и 60, а радиус — 50. Результат:

    Радиальный градиент с разными координатами x и y.

Этап 3: Настройка маркеров цвета

Для градиента существует несколько методов addColorStop:

addColorStop(offset, color)

Чтобы добавить маркер цвета, необходимо указать нужный цвет и его положение в градиенте. В качестве положения можно задать любую точку от 0 (начало градиента) до 1 (окончание градиента).

В нашем примере переменная myGradient устанавливает значение addColorStop от 0 до 1, чтобы градиент равномерно менял свой цвет от белого к черному.

myGradient.addColorStop(0,"white");
myGradient.addColorStop(1,"black");

  • Несколько маркеров цвета

    Вы можете использовать несколько маркеров цвета. В данном примере второй метод addColorStop устанавливает маркер цвета посередине градиента:

      myGradient.addColorStop(0,"orange");
  myGradient.addColorStop(.5, "green");
  myGradient.addColorStop(1, "blue");

    Будет создан такой градиент:

    Вертикальный многоцветный градиент.

Этап 4: Настройка стиля заливки

Прежде чем приступить к созданию градиента, для свойства fillStyle нужно задать значение "myGradient".

context.fillStyle = myGradient;

Наконец, метод fillRect используется для рисования изображения:

context.fillRect(0, 0, 200, 100);

Полные примеры

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

Данный код JavaScript использует элемент полотна для рисования прямоугольника, а затем применяет диагональный линейный градиент для свойства fillStyle этого прямоугольника.

window.onload = drawGradient;   

function drawGradient() {

    // Get the canvas element and specify a 2d drawing context.
    var context = document.getElementById("canvas").getContext("2d");

    // Create a linear gradient.
    var myGradient=context.createLinearGradient(0, 0, 300, 100);

    // Set the color stops.
    myGradient.addColorStop(0, "white");
    myGradient.addColorStop(1, "black");

    // Set the fill style to the gradient.
    context.fillStyle = myGradient;

    // Draw the rectangle.
    context.fillRect(0, 0, 200, 100);
}

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

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

window.onload = drawGradient;   

function drawGradient() {

    // Get the canvas element and specify a 2d drawing context.
    var context = document.getElementById("canvas").getContext("2d");
  
    // Create the radial gradient.
    var myGradient = context.createRadialGradient(52, 50, 10, 52, 50, 200);

    // Set the color stops.
    myGradient.addColorStop(0, "white");
    myGradient.addColorStop(1, "black");

    // Set the fill style to the gradient.     
    context.fillStyle = myGradient;

    // Draw a circle.
    context.beginPath();
    context.arc(52, 50, 40, 0, Math.PI*2, true); 
    context.closePath();
    context.fill();
}

Каскадные таблицы стилей (CSS)

Это пример спецификации CSS, которая создает серую границу вокруг элемента полотна.

/* Style the canvas element with a grey border. */
canvas { border: 1px solid #c3c3c3; }

HTML-файл

Этот HTML-файл создает элемент полотна и использует внешние файлы JavaScript и CSS.

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="myJavascript.js"></script>
        <link Rel="stylesheet" Href="myStyle.css" Type="text/css">
    </head>
    <body>
        <canvas id="canvas" width="200" height="100" />
    </body>
</html>

Связанные разделы

Краткое руководство: рисование на полотне

Оптимизация производительности: код JavaScript