Последние учебники веб-разработки
 

HTML canvas addColorStop() Method

<HTML Canvas Ссылка

пример

Определить градиент, который идет от черного до белого, как стиль заливки для прямоугольника:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');

var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");

ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Попробуй сам "

Поддержка браузеров

Числа в таблице указать первую версию браузера, который полностью поддерживает метод.

метод
addColorStop() да 9.0 да да да

Определение и использование

addColorStop() метод определяет цвет и положение в объекте градиента.

addColorStop() метод используется вместе с createLinearGradient() или createRadialGradient() .

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

Синтаксис JavaScript: gradient.addColorStop(stop,color);

Значения параметров

параметр Описание Сыграй
stop Значение в диапазоне от 0,0 до 1,0, что представляет позицию между началом и концом в градиенте Сыграй "
color Значение CSS цвет для отображения в положенииостановки Сыграй "

Еще примеры

пример

Определение градиента с несколькими addColorStop() методы:

Yourbrowserdoesnotsupportthecanvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");

ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Попробуй сам "

<HTML Canvas Ссылка