最新的Web開發教程
 

HTML canvas createLinearGradient() Method

<畫布對象

例

定義一個梯度(left to right) ，從黑到白的雲，為矩形的填充樣式：

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);
試一試»

瀏覽器支持

在表中的數字規定，完全支持方法的第一個瀏覽器版本。

方法
createLinearGradient() 4 9 3.6 4 10.1

定義和用法

所述createLinearGradient()方法創建的線性梯度對象。

梯度可用於填充矩形，圓形，線條，文字等

Tip:使用此對象的值到的StrokeStyle或填充樣式屬性。

Tip:使用addColorStop()方法來指定不同的顏色，並且其中在對象梯度的顏色的位置。

JavaScript語法： context 。 createLinearGradient( x0,y0,x1,y1 ) ;

參數值

參數 描述
x0 漸變的開始點的x坐標
y0 漸變的開始點的y坐標
x1 漸變的終點的x坐標
y1 漸變的終點的y坐標
例子

更多示例

例

定義一個梯度(top to bottom)作為用於矩形的填充樣式：

Yourbrowserdoesnotsupportthecanvastag。

JavaScript的：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
試一試»

例

定義一個漸變，從黑變，紅色，白色，為矩形的填充樣式：

Yourbrowserdoesnotsupportthecanvastag。

JavaScript的：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
試一試»
<畫布對象