Книга: JavaScript. Подробное руководство, 6-е издание

CanvasGradient

CanvasGradient

цветной градиент для использования в элементе Canvas

Объект CanvasGradient представляет цветовой градиент, который может быть присвоен свойствам strokeStyle и fillStyle объекта CanvasRenderingContext2D. Объект CanvasGradient возвращается методами createLinearGradient() и createRadialGradient() объекта CanvasRenderingContext2D.

После создания объекта CanvasGradient следует вызвать метод addColorStop() и с его помощью определить, какой цвет в какой позиции должен отображаться внутри градиента. Между заданными позициями цвет будет интерполироваться так, чтобы создать эффект плавного перехода или исчезновения цвета. Если не определить цвет ни в одной позиции, градиент будет окрашен однородным прозрачным черным цветом.

Методы

void addColorStop(double offset, string color)

Метод addColorStop() определяет фиксированные цвета внутри градиента. В аргументе color передается строка с названием цвета в формате CSS. В аргументе offset передается значение с плавающей точкой в диапазоне от 0.0 до 1.0, которое представляет позицию между началом и концом градиента. Значение 0 соответствует начальной позиции, значение 1 - конечной.

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

Оглавление книги