HTML5+CSS3+jQuery Mobile+Bootstrap开发APP从入门到精通（视频教学版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

7.3 绘制渐变图形

渐变是两种或更多颜色的平滑过渡，是指在颜色集上使用逐步抽样算法，并将结果应用于描边样式和填充样式中。Canvas的绘图上下文支持两种类型的渐变：线性渐变和放射性渐变，其中放射性渐变也称为径向渐变。

7.3.1 绘制线性渐变

创建一个简单的渐变非常容易，比使用Photoshop还要快，使用渐变需要以下3个步骤。


01 创建渐变对象。


var gradient=cxt.createLinearGradient(0,0,0,canvas.height);


02 为渐变对象设置颜色，指明过渡方式。


gradient.addColorStop(0,'#fff');
gradient.addColorStop(1,'#000');

03 在context上为填充样式或描边样式设置渐变。

cxt.fillStyle=gradient;

要设置显示颜色，在渐变对象上使用addColorStop函数即可。除了可以变换成其他颜色外，还可以为颜色设置alpha值（如透明），并且alpha值也是可以变化的。为了达到这样的效果，需要使用颜色值的另一种表示方法，例如内置alpha组件的CSSrgba函数。

绘制线性渐变，会使用到如表7-5所示的几个函数。

表7-5 绘制函数

【例7.5】（实例文件：ch07\7.5.html）

<!DOCTYPE html>
<html>
<head>
<title>线性渐变</title>
</head>
<body>
<h1>绘制线性渐变</h1>
<canvas id="canvas" width="400" height="300" style="border:1px solid red"/>
<script type="text/javascript">
var c=document.getElementById("canvas");
var cxt=c.getContext("2d");    //使用2D环境对象产生了一个线性渐变对象
var gradient=cxt.createLinearGradient(0,0,0,canvas.height);
gradient.addColorStop(0,'#fff');  // 设置渐变颜色
gradient.addColorStop(1,'#000');  // 设置渐变颜色
cxt.fillStyle=gradient;            //将渐变填充到上下文环境的样式中
cxt.fillRect(0,0,400,400);
</script>
</body>
</html>

上面的代码使用2D环境对象产生了一个线性渐变对象，渐变的起始点是（0，0），渐变的结束点是（0，canvas.height），下面使用addColorStop函数设置渐变颜色，最后将渐变填充到上下文环境的样式中。

在IE 11.0中浏览效果如图7-5所示，可以看到网页中创建了一个垂直方向上的渐变，从上到下颜色逐渐变深。

图7-5 线性渐变

7.3.2 绘制径向渐变

除了线性渐变以外，HTML5 Canvas API还支持放射性渐变，所谓放射性渐变就是颜色会介于两个指定圆间的锥形区域平滑变化。放射性渐变和线性渐变使用的颜色终止点是一样的。如果要实现放射线渐变，即径向渐变，需要使用函数createRadialGradient。

createRadialGradient(x0,y0,r0,x1,y1,r1)函数表示沿着两个圆之间的锥面绘制渐变。其中前3个参数代表开始圆的圆心为（x0,y0），半径为r0。最后3个参数代表结束圆的圆心为(x1,y1)，半径为r1。


【例7.6】（实例文件：ch07\7.6.html）

上面代码中，首先创建渐变对象gradient，此处使用方法createRadialGradient创建了一个径向渐变，下面使用addColorStop添加颜色，最后将渐变填充到上下文环境中。

在IE 11.0中浏览效果如图7-6所示，可以看到网页中，从圆的中心亮点开始，向外逐步发散，形成了一个径向渐变。

图7-6 径向渐变

上一章目录下一章