Метод addColorStop

Добавляет стоп цвет объекту градиента, созданному методом createLinearGradient или createRadialGradient.

Синтаксис

addColorStop(position, color)

Параметры

position — положение цвета в градиенте. Значение должно быть в диапазоне 0.0 (начало) до 1.0 (конец);
color — имя или код цвета, или его rgb/rgba представление.

Объекту градиента можно задать сколько угодно стоп цветов.

Пример

var canvas = document.getElementById("picture");
var ctx = canvas.getContext("2d");
	
	var lineargradient = ctx.createLinearGradient(150,0,150,150);
	lineargradient.addColorStop(0,"red");  
	lineargradient.addColorStop(1,"white");
	ctx.fillStyle = lineargradient;
	ctx.fillRect(0,0,150,150);
	
	var lineargradient2 = ctx.createLinearGradient(50,50,150,250);
	lineargradient2.addColorStop(0,"green");  
	lineargradient2.addColorStop(0.5,"blue");
	lineargradient2.addColorStop(1,"yellow");
	
	 
	ctx.strokeStyle = lineargradient2;
	ctx.moveTo(50,50);
	ctx.lineTo(150,250);
	ctx.stroke();

В живую.

Теги: HTML5, Canvas 2D API, Canvas

Показать комментарии