HTML5 CANVAS：绘制渐变色_H5之家 - 中国HTML5教程资源分享第一站

HTML5 CANVAS：绘制渐变色渐变色,上下文,HTML5,先来,中心【HTML】 1

　　HTML5 Canvas渐变是一种用于填充或描边图形的颜色模式。渐变色是由不同的颜色进行过渡，而不是单一的颜色。先来看几个canvas渐变色的例子：

HTML5 CANVAS：绘制渐变色渐变色,上下文,HTML5,先来,中心【HTML】 2

　　渐变按照类型来分可以分为两种类型：

　　线性渐变
　　径向渐变

　　线性渐变以线性的模式来改变颜色，也就是水平，垂直或对角方向。

　　径向渐变以圆形模式来改变颜色，颜色以圆形的中心向外辐射。

　　线性渐变
　　正如前面所说，线性渐变以线性的模式来改变颜色。我们可以通过2D上下文的createLinearGradient()方法来创建一个线性渐变。下面是一个例子：

var canvas = document.getElementById("ex1");

var context = canvas.getContext("2d");

var x1 = 0;

var y1 = 0;

var x2 = 100;

var y2 = 0;

var linearGradient1 = context.createLinearGradient(x1,y1,x2,y2);

复制代码

　　createLinearGradient()函数有4个参数：x1，y1，x2和y2。这4个参数决定渐变的方向和距离。线性渐变会从第一个点(x1,y1)扩展到第二个点(x2,y2)。

　　水平的线性渐变仅仅是水平方向的参数值(x1和x2)不同，例如：

var x1 = 0;

var y1 = 0;

var x2 = 100;

var y2 = 0;

var linearGradient1 = context.createLinearGradient(x1,y1,x2,y2);

复制代码

　　垂直的线性渐变仅仅是垂直方向的参数值(y1和y2)不同，例如：

var x1 = 0;

var y1 = 0;

var x2 = 0;

var y2 = 100;

var linearGradient1 = context.createLinearGradient(x1,y1,x2,y2);

复制代码

　　一个对角线的线性渐变水平和垂直方向上的参数都不相同，例如：

var x1 = 0;

var y1 = 0;

var x2 = 100;

var y2 = 100;

var linearGradient1 = context.createLinearGradient(x1,y1,x2,y2);

复制代码

　　颜色停止点(Color Stops)

　　在上面的例子中，并没有指明线性渐变使用什么颜色。为了指明使用什么渐变颜色，可以在渐变对象上使用addColorStop()方法来指定。例如：

var linearGradient1 = context.createLinearGradient(0,0,100,0);

linearGradient1.addColorStop(0, 'rgb(255, 0, 0)');

linearGradient1.addColorStop(1, 'rgb( 0, 0, 0)');

复制代码

　　addColorStop()方法有两个参数。第一个参数是0-1之间的一个数值，这个数值指定该颜色进入渐变多长的距离，第二个参数是颜色值，例子中使用的是rgb()颜色值。

　　在上面的例子中为渐变添加了两种颜色。第一种颜色是红色，设置在渐变的开始处。第二种颜色是黑色，设置在渐变的结束处。
　　你可以添加通过addColorStop()函数来添加更多的颜色。例如下面的例子添加了三种颜色：

var linearGradient1 = context.createLinearGradient(0,0,100,0);

linearGradient1.addColorStop(0 , 'rgb(255, 0, 0)');

linearGradient1.addColorStop(0.5, 'rgb( 0, 0, 255);

linearGradient1.addColorStop(1 , 'rgb( 0, 0, 0)');

复制代码

　　上面的代码在渐变的中间添加了一个蓝色。整个渐变将平滑的从红色过渡到蓝色，在过渡到黑色。

　　使用渐变来填充和描边图形

　　你可以使用渐变来填充或描边图形。要填充或描边图形可以通过2D上下文的fillStyle或strokeStyle属性来完成。下面是一个示例代码：

var linearGradient1 = context.createLinearGradient(0,0,100,0);

linearGradient1.addColorStop(0 , 'rgb(255, 0, 0)');

linearGradient1.addColorStop(0.5, 'rgb( 0, 0, 255);

linearGradient1.addColorStop(1 , 'rgb( 0, 0, 0)');

context.fillStyle = linearGradient1;

context.strokeStyle = linearGradient1;

复制代码

　　通过fillStyle或strokeStyle属性来指向渐变对象即可完成渐变的填充或描边。

　　现在我们可以为图形填充渐变色或描边渐变色。下面是一个例子，一个矩形的填充渐变色和一个矩形的描边渐变色。

var canvas = document.getElementById("ex2");

var context = canvas.getContext("2d");

var linearGradient1 = context.createLinearGradient(0,0,100,0);

linearGradient1.addColorStop(0 , 'rgb(246, 36, 89)');

linearGradient1.addColorStop(0.5, 'rgb( 31, 58, 147)');

linearGradient1.addColorStop(1 , 'rgb( 34, 49, 63)');

context.fillStyle = linearGradient1;

context.fillRect(10,10,100, 100);

var linearGradient2 = context.createLinearGradient(125,0, 225,0);

linearGradient2.addColorStop(0 , 'rgb(255, 0, 0)');

linearGradient2.addColorStop(0.5, 'rgb( 0, 0, 255)');

linearGradient2.addColorStop(1 , 'rgb( 0, 0, 0)');

context.strokeStyle = linearGradient2;

context.strokeRect(125, 10, 100, 100);

复制代码