Метод createLinearGradient

Дата публикации: 14.10.2011

Создает объект линейного градиента.

Синтаксис

createLinearGradient(x1,y1,x2,y2)

Параметры

x1,y1 — координаты начальной точки;
x2,y2 — координаты конечно точки.

После создания объекта градиента, можно ему присвоить цвета с помощью метода addColorStop. Градиент появится на холсте после применения метода fill() или stroke().

Пример

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

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