例
定義了從黑到白的推移，作為矩形的填充樣式的漸變（從左至右）：
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() | 是 | 9 | 是 | 是 | 是 |
定義和用法
該createLinearGradient()方法創建一個線性漸變對象。
梯度可用於填充矩形，圓形，線條，文字等
提示：用此對象的值到的StrokeStyle或fillStyle屬性。
提示：使用addColorStop()方法來指定不同的顏色，並在漸變中物體的顏色進行定位。
| JavaScript語法： | context.createLinearGradient(x0,y0,x1,y1); |
|---|
參數值
| 參數 | 描述 |
|---|---|
| x0 | 漸變的開始點的x坐標 |
| y0 | 漸變的開始點的y坐標 |
| x1 | 漸變的終點的x坐標 |
| y1 | 漸變的終點的y坐標 |
更多示例
例
定義一個梯度（從上到下），為矩形的填充樣式：
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);
試一試» 例
定義一個漸變，從黑變，紅色，白色，為矩形的填充樣式：
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);
試一試»