HTML5 canvas createLinearGradient() 方法
实例
：
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);
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 createLinearGradient() 方法。
注释：Internet Explorer 8 <canvas> 元素。
createLinearGradient() 象。
。
提示：象作为 strokeStyle 或 fillStyle
提示：请使用 addColorStop() 以及在 gradient 。
JavaScript 语法：
context.createLinearGradient(x0,y0,x1,y1);
参数值
| 参数 | 描述 |
|---|---|
| x0 | 的 x 坐标 |
| y0 | 的 y 坐标 |
| x1 | 的 x 坐标 |
| y1 | 的 y 坐标 |
更多实例
实例 1
式：
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);
实例 2
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);