本节书摘来自异步社区《html5 canvas开发详解（第2版）》一书中的第2章，第2.8节,作者： 【美】steve fulton , jeff fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。
本章已经在讨论创建基本和复杂形状时，粗略地介绍了颜色和填充样式。本节将深入探讨形状的着色和填充。除了这些简单的着色和填充外，还有很多可用的不同渐变样式。另外，canvas还可以使用位图来填充形状（参见第4章）。
2.8.1 基本填充颜色设置
canvas fillstyle属性用来设置画布上形状的基本颜色和填充。fillstyle使用简单的颜色名称。这看起来非常简单，例如：
下面是出自html4规范的可用颜色字符串值列表。截止到本书出版前，html5还没有对此另行设定。由于没有增加html5专属的颜色，html4的颜色都可以在html5中正确显示。
提示
所有这些颜色值都可以应用到strokestyle属性和fillstyle属性中。
当然，使用颜色名称字符串并不是指定一个纯填充的唯一方法。以下是其他一些方法。
（1）以rgb()方法设置填充色。
rgb()方法可以用24位rgb值指定填充色。
这与上面使用red字符串设定的红色是一样的。
（2）以十六进制数字字符串设置填充色。
也可以使用一个十六进制数字字符串设置fillstyle颜色。
（3）以rgba()方法设置填充色。
rgba()方法可以指定32位色值的填充色，其后8位表示透明度。
**context.fillstyle = "rgba(255,0,0,1) ";
**透明度范围为1（不透明）～0（透明）。
2.8.2 填充渐变形状
在画布上创建渐变填充有两个基本选项：线性或径向。线性渐变创建一个水平、垂直或者对角线的填充图案。径向渐变自中心点创建一个放射状填充。下面是它们的一些示例。
1．线性渐变
线性渐变有3种基本样式：水平、垂直和对角线。
（1）线性水平渐变：通过沿对象设置的颜色断点来控制渐变颜色。
例2-14为创建一个简单水平渐变，如图2-23所示。
https://yqfile.alicdn.com/958327ba79fdbd6095a4f65a2077a1f41fcf6275.png" >
创建一个水平渐变，必须先创建一个变量（gr）来指代一个新的渐变，设置方式如下。
createlineargradient方法调用中的4个值是开始渐变的左上角的x坐标和y坐标，以及结束渐变的右下角的x坐标和y坐标。示例从（0，0）开始，到（100，0）结束。请注意，当创建一个水平渐变的时候，y值都是0，创建垂直渐变的时候正好相反。
一旦定义了渐变的大小，就需要使用两个参数值来加入颜色断点。第一个是相对位置的开始渐变颜色的渐变原点，第二个是渐变的颜色。相对位置的值必须在0.0～1.0之间。
例2-14中设置的渐变是起点（0）为红色、中心点（0.5）为绿色、终点（1）为红色。这将填充一个“红—绿—红”渐变形状。
接下来，应用context.fillstyle生成刚才创建的渐变。
最后，在画布上创建一个矩形。
请注意，刚刚创建了一个与渐变大小完全相同的矩形。这里还可以改变输出矩形的大小，方法如下。
在例2-14的基础上，例2-15增加了两个新的填充矩形，如图2-24所示。请注意，渐变充满可用空间，最终的颜色填充的区域比定义的渐变区域要大。
① 在边框上应用水平渐变色。
渐变可以应用到任何形状，甚至是形状边框。例2-16使用例2-15中的填充矩形创建了一个strokerect形状，而不是创建填充矩形。图2-25显示了不同的结果。
https://yqfile.alicdn.com/805a5706f8cf16a8937bc3d5c7e4bf2dab4e89e7.png" >
② 在复杂形状上应用水平渐变色。
读者也可以将线性渐变应用到由点组成的封闭形状，如例2-17所示。如果形状的起止点相同，就是封闭的。
例2-17使用了context.fill()命令将当前的fillstyle填充到形状中，输出效果如图2-26所示。
图2-26显示了通过点创建的新形状，只要点是封闭的，填充就会按需要呈现。
（2）垂直渐变色：垂直渐变与水平渐变的创建方式非常类似。不同点在于：y值不全是0，而x值必须全是0。
例2-18显示了例2-17中创建的水平渐变形状显示为垂直渐变的情况，输出结果如图2-27所示。
https://yqfile.alicdn.com/94ccaae85547af1611347b24c8ee932a46e84b4d.png" >
例2-18和例2-17的唯一不同之处在于创建线性渐变的线。
水平渐变（例2-17）如下所示。
垂直渐变（例2-18）如下所示。
形状边框水平渐变的规则同样适用于垂直渐变。例2-19将例2-18中的形状从填充改成描边，边框效果如图2-28所示。
https://yqfile.alicdn.com/f24cc4ff4ac31ab0a73870de3d1ccb529a9a7212.png" >
（3）对角线渐变：读者可以轻松创建一个对角线渐变，只需修改createlineargradient()函数的第二个x值和y值。
为创建一个图2-29所示的完美对角线渐变，可以填充一个与对角线渐变相同大小的正方形。代码如例2-20所示。
https://yqfile.alicdn.com/db6eaf02b6dce1c27c1dd1c97b110c15725f7dd4.png" >
2．径向渐变
径向渐变的定义过程和线性渐变非常类似。尽管径向渐变需要6个参数设置而线性渐变仅需4个，但是它同样采用颜色断点的概念来创建颜色变化。
6个参数用来定义两个圆的圆心和半径。第一个圆是开始圈，第二个圆是结束圈。举例如下。
var gr = context.createradialgradient(50,50,25,50,50,100);
第一个圆的圆心位于（50，50），半径为25；第二个圆的圆心位于（50，50），半径为100。
这将会创建两个同心圆，然后向线性渐变那样设置颜色断点。
例2-21将这些代码合并起来，结果如图2-30所示。
https://yqfile.alicdn.com/a49ef55e33171214fada30a15a46b284220ca304.png" >
例2-22将第二个圆远离第一个圆，产生的效果如图2-31所示。
如同线性渐变一样，复杂形状同样可以进行径向渐变填充。例2-23对本章前面的弧形示例应用了径向渐变，结果如图2-32显示。
例2-23将例2-22的径向渐变应用到圆上，而不是应用到矩形上。这样就清除了形状背景的红色正方形。
也可以将径向渐变应用到弧形描边，就像填充那样。代码如例2-24所示，效果如图2-23所示。
例2-24创建了一个比例2-23中小一点的圆，径向渐变将显示在弧形的边框上。如果与例2-23中的圆大小相同，这里将得到一个纯红色填充，因为径向渐变在圆形直径边缘将是纯红色。