4.3 定义样式和颜色
canvas支持很多颜色和样式选项，如线型、渐变、图案、透明度和阴影。本节将介绍样式的设置方法。
4.3.1 颜色
视频讲解
使用fillStyle和strokeStyle属性可以给图形上色。其中，fillStyle设置图形的填充颜色，strokeStyle设置图形轮廓的颜色。
颜色值可以是表示CSS颜色值的字符串，也可以是渐变对象或者图案对象（参考下面小节介绍）。默认情况下，线条和填充颜色都是黑色，CSS颜色值为#000000。
一旦设置了strokeStyle或fillStyle的值，那么这个新值就会成为新绘制的图形的默认值。如果要给每个图形定义不同的颜色，就需要重新设置fillStyle或strokeStyle的值。
【示例1】本例使用嵌套for循环绘制方格阵列，每个方格填充不同色，效果如图4.15所示。
在嵌套for结构中，使用变量i和j为每个方格产生唯一的RGB色彩值，其中仅修改红色和绿色通道的值，而保持蓝色通道的值不变。可以通过修改这些颜色通道的值来产生各种各样的色板。通过增加渐变的频率，可以绘制出类似Photoshop调色板的效果。
【示例2】下面示例与示例1有点类似，但使用strokeStyle属性，画的不是方格，而是用arc()方法画圆，效果如图4.16所示。
图4.15 绘制渐变色块
图4.16 绘制渐变圆圈
4.3.2 不透明度
视频讲解
使用globalAlpha全局属性可以设置绘制图形的不透明度，另外也可以通过色彩的不透明度参数来为图形设置不透明度，这种方法相对于使用globalAlpha属性来说，会更灵活些。
使用rgba()方法可以设置具有不透明度的颜色，用法如下。
rgba(R,G,B,A)
其中R、G、B将颜色的红色、绿色和蓝色成分指定为0～255的十进制整数，A把alpha（不透明）成分指定为0.0和1.0之间的一个浮点数值，0.0为完全透明，1.0为完全不透明。例如，可以用"rgba(255,0,0,0.5)"表示半透明的完全红色。
【示例1】下面示例使用四色格作为背景，设置globalAlpha为0.2后，在上面画一系列半径递增的半透明圆，最终结果是一个径向渐变效果，如图4.17所示。圆叠加得越多，原先所画的圆的透明度会越低。通过增加循环次数，画更多的圆，背景图的中心部分会完全消失。
图4.17 用globalAlpha设置不透明度
【示例2】本例与示例1类似，不过不是画圆，而是画矩形。这里还可以看出，rgba()可以分别设置轮廓和填充样式，因而具有更好的可操作性和使用灵活性，效果如图4.18所示。
图4.18 用rgba()方法设置不透明度
具体代码解析请扫码学习。
线上阅读
4.3.3 实线
视频讲解
1．线的粗细
使用lineWidth属性可以设置线条的粗细，取值必须为正数，默认为1.0。
【示例1】下面示例使用for循环绘制了12条线宽依次递增的线段，效果如图4.19所示。
2．端点样式
lineCap属性用于设置线段端点的样式，包括三种样式：butt、round和square，默认值为butt。
【示例2】下面示例绘制了三条蓝色的直线段，并依次设置上述三种属性值，两侧有两条红色的参考线，以方便观察，预览效果如图4.20所示。可以看到这三种端点样式从上到下依次为平头、圆头和方头。
图4.19 lineWidth示例
图4.20 lineCap示例
3．连接样式
lineJoin属性用于设置两条线段连接处的样式，包括三种样式：round、bevel和miter，默认值为miter。
【示例3】下面示例绘制了三条蓝色的折线，并依次设置上述三种属性值，观察拐角处（即直线段连接处）样式的区别。在浏览器中的预览效果如图4.21所示。
4．交点方式
miterLimit属性用于设置两条线段连接处交点的绘制方式，其作用是为斜面的长度设置一个上限，默认为10，即规定斜面的长度不能超过线条宽度的10倍。当斜面的长度达到线条宽度的10倍时，就会变为斜角。如果lineJoin属性值为round或bevel时，miterLimit属性无效。
【示例4】通过下面示例可以观察当角度和miterLimit属性值发生变化时斜面长度的变化。在运行代码之前，也可以将miterLimit属性值改为固定值，以观察不同的值产生的结果，效果如图4.22所示。
图4.21 lineJoin示例
图4.22 miterLimit示例
4.3.4 虚线
视频讲解
使用setLineDash()方法和lineDashOffset属性可以定义虚线样式。setLineDash()方法接收一个数组来指定线段与间隙的交替，lineDashOffset属性设置起始偏移量。
【示例】下面示例绘制一个矩形虚线框，然后使用定时器设计每隔0.5秒重绘一次，重绘时改变lineDashOffset属性值，从而创建一个行军蚁的效果，效果如图4.23所示。
图4.23 设计动态虚线框
注意：在IE浏览器中，从IE 11开始才支持setLineDash()方法和lineDashOffset属性。
4.3.5 线性渐变
视频讲解
要绘制线性渐变，首先使用createLinearGradient()方法创建canvasGradient对象，然后使用addColorStop()方法进行上色。
createLinearGradient()方法的用法如下所示：
context.createLinearGradient(x0,y0,x1,y1);
参数说明如下：
x0：渐变开始点的x坐标。
y0：渐变开始点的y坐标。
x1：渐变结束点的x坐标。
y1：渐变结束点的y坐标。
addColorStop()方法的用法如下所示：
gradient.addColorStop(stop,color);
参数说明如下：
stop：介于0.0与1.0的值，表示渐变中开始与结束之间的相对位置。渐变起点的偏移值为0，终点的偏移值为1。如果position值为0.5，则表示色标会出现在渐变的正中间。
color：在结束位置显示的CSS颜色值。
【示例】下面示例演示如何绘制线性渐变。在本例中共添加了8个色标，分别为红、橙、黄、绿、青、蓝、紫、红，预览效果如图4.24所示。
图4.24 绘制线性渐变
使用addColorStop()方法可以添加多个色标，色标可以在0～1任意位置添加，例如，从0.3处开始设置一个蓝色色标，再在0.5处设置一个红色色标，则0～0.3都会填充为蓝色。0.3～0.5为蓝色到红色的渐变，0.5～1则填充为红色。
4.3.6 径向渐变
视频讲解
要绘制径向渐变，首先需要使用createRadialGradient()方法创建canvasGradient对象，然后使用addColorStop()方法进行上色。
createRadialGradient()方法的用法如下。
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
参数说明如下：
x0：渐变的开始圆的x坐标。
y0：渐变的开始圆的y坐标。
r0：开始圆的半径。
x1：渐变的结束圆的x坐标。
y1：渐变的结束圆的y坐标。
r1：结束圆的半径。
【示例】下面示例使用径向渐变在画布中央绘制一个圆球形状，预览效果如图4.25所示。
图4.25 绘制径向渐变
4.3.7 图案
视频讲解
使用createPattern()方法可以绘制图案效果，用法如下所示。
context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
参数说明如下：
image：规定要使用的图片、画布或视频元素。
repeat：默认值。该模式在水平和垂直方向重复。
repeat-x：该模式只在水平方向重复。
repeat-y：该模式只在垂直方向重复。
no-repeat：该模式只显示一次（不重复）。
创建图案的步骤与创建渐变有些类似，需要先创建出一个pattern对象，然后将其赋予fillStyle属性或strokeStyle属性。
【示例】下面示例以一幅png格式的图像作为image对象用于创建图案，以平铺方式同时沿x轴与y轴方向平铺。在浏览器中的预览效果如图4.26所示。
图4.26 绘制图案
4.3.8 阴影
视频讲解
创建阴影需要4个属性，简单说明如下：
shadowColor：设置阴影颜色。
shadowBlur：设置阴影的模糊级别。
shadowOffsetX：设置阴影在x轴的偏移距离。
shadowOffsetY：设置阴影在y轴的偏移距离。
【示例】下面示例演示创建文字阴影效果，如图4.27所示。
图4.27 为文字设置阴影效果
4.3.9 填充规则
视频讲解
前面介绍了使用fill()方法可以填充图形，该方法可以接收两个值，用来定义填充规则。取值说明如下：
"nonzero"：非零环绕数规则，为默认值。
"evenodd"：奇偶规则。
填充规则根据某处在路径的外面或者里面来决定该处是否被填充，这对于路径相交或者路径被嵌套的时候是有用的。
【示例】下面示例使用evenodd规则填充图形，则效果如图4.28所示，默认填充效果如图4.29所示。
图4.28 evenodd规则填充
图4.29 nonzero规则填充
注意：IE暂不支持evenodd规则填充。