HTML canvas createLinearGradient() 方法

定义和用法

createLinearGradient() 方法创建线性的渐变对象。

渐变可用于填充矩形、圆形、线条、文本等等。

提示：请使用该对象作为或属性的值。

提示：请使用方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。

JavaScript 语法：	context.createLinearGradient(x0,y0,x1,y1);

参数值

参数	描述
x0	渐变开始点的 x 坐标
y0	渐变开始点的 y 坐标
x1	渐变结束点的 x 坐标
y1	渐变结束点的 y 坐标

HTML canvas createRadialGradient() 方法

定义和用法

createRadialGradient() 方法创建放射状/圆形渐变对象。

渐变可用于填充矩形、圆形、线条、文本等等。

提示：请使用该对象作为或属性的值。

提示：请使用方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。

JavaScript 语法：	context.createRadialGradient(x0,y0,r0,x1,y1,r1);

参数值

参数	描述
x0	渐变的开始圆的 x 坐标
y0	渐变的开始圆的 y 坐标
r0	开始圆的半径
x1	渐变的结束圆的 x 坐标
y1	渐变的结束圆的 y 坐标
r1	结束圆的半径

实例

绘制一个矩形，并用放射状/圆形渐变进行填充：

    var c=document.getElementById("myCanvas"); 
 var ctx=c.getContext("2d"); 
 var grd=ctx.createRadialGradient(75,50,5,90,60,100); 
 grd.addColorStop(0,"red"); 
 grd.addColorStop(1,"white"); 
 // Fill with gradient 
 ctx.fillStyle=grd; 
 ctx.fillRect(10,10,150,100); 

HTML canvas addColorStop() 方法

定义和用法

addColorStop() 方法规定渐变对象中的颜色和位置。

addColorStop() 方法与或一起使用。

注意：您可以多次调用 addColorStop() 方法来改变渐变。如果您不对渐变对象使用该方法，那么渐变将不可见。为了获得可见的渐变，您需要创建至少一个色标。

JavaScript 语法：	gradient.addColorStop(stop,color);

参数值

参数	描述
stop	介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
color	在 stop 位置显示的。

实例

通过多个 addColorStop() 方法来定义渐变：

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("0.3","magenta"); 
 grd.addColorStop("0.5","blue"); 
 grd.addColorStop("0.6","green"); 
 grd.addColorStop("0.8","yellow"); 
 grd.addColorStop(1,"red"); 
 ctx.fillStyle=grd; 
 ctx.fillRect(20,20,150,100); 

纵方向的线性渐变

我们来看一个具体的例子：

JavaScript
              
           1 
           2 
           3 
           4 
           5 
           6 
           7 
           8 
           9 
           10 
           11 
           12 
           13 
           14 
           15 
           16 
           17 
           18 
           19 
           20 
           21 
        
onload
 
=
 
function
(
)
 
{ 
  
draw
(
)
;
}
;
function
 
draw
(
)
 
{ 
  
var
 
canvas
 
=
 
document
.
getElementById
(
'c1'
)
;
  
if
 
(
 
!
 
canvas
 
||
 
!
 
canvas
.
getContext
 
)
 
{ 
 
return
 
false
;
 
}
  
var
 
ctx
 
=
 
canvas
.
getContext
(
'2d'
)
;
  
ctx
.
beginPath
(
)
;
  
/* 指定渐变区域 */
  
var
 
grad
  
=
 
ctx
.
createLinearGradient
(
0
,
0
,
 
0
,
140
)
;
  
/* 指定几个颜色 */
  
grad
.
addColorStop
(
0
,
'rgb(192, 80, 77)'
)
;
    
// 红
  
grad
.
addColorStop
(
0.5
,
'rgb(155, 187, 89)'
)
;
 
// 绿
  
grad
.
addColorStop
(
1
,
'rgb(128, 100, 162)'
)
;
  
// 紫
  
/* 将这个渐变设置为fillStyle */
  
ctx
.
fillStyle
 
=
 
grad
;
  
/* 绘制矩形 */
  
ctx
.
rect
(
0
,
0
,
 
140
,
140
)
;
  
ctx
.
fill
(
)
;
  
// ctx.fillRect(0,0, 140,140);
}
       
     

画完以后是这个结果：

代码中的各个定义也很清楚，因为(0, 0, 0, 140)指定了一条垂直的线，所以最终效果是垂直的进行渐变，这个效果在各种浏览器中应该都是一样的。我们以前说到过，画矩形有个简便的fillRect方法，这个方法是rect方法和fill方法的组合，非常方便。这里之所以没有采用，是因为貌似在低版本的Safari下有问题（无视渐变的fillStyle，只用默认的颜色），但在最新（现在是5.2）版本下尝试过没问题了，估计很早就修复了，也就放心用吧。

水平方向的线性渐变

有了上面的基础，这个就非常简单了，只需要修改一句话就好了：

JavaScript
              
           1 
        
var
 
grad
 
=
 
ctx
.
createLinearGradient
(
0
,
0
,
 
140
,
0
)
;
       
     

实际的效果可想而知，如图所示。

倾斜的线性渐变

有了垂直方向和水平方向，也就一个倾斜的可以玩玩了，和上面一样，只是指定一下方向就可以了：

JavaScript
              
           1 
        
var
 
grad
 
=
 
ctx
.
createLinearGradient
(
0
,
 
0
,
 
140
,
 
140
)
;
       
     

还需要进一步说明么？如图所示。

这次的三个图。

转自菜鸟教程，

你可能感兴趣的文章