颜色及阴影
属性fil丨Style与strokeStyle用来定义填充及线条的颜色，遵循CSS颜色值规则，并可拥有一些不同的格式。表以红色为例展示了一些可用选项。
若要为Canvas定义当前填充及线条颜色，你只需要在fillStyle及strokeStyle用字符串形式写入相关颜色值。在条形图案例中，我们选择颜色silver(SVG命名方式)作为填充，RGBA格式的半透明黑作为线条。我们计划让所有条形外观一致，因此在drawBars()前定义样式：
context.fillStyle=*silver';context.strokeStyle=’rgba(,0,)';vardrawBars=function(bars){//codefordrawingbars}；
有效透明度范围为0.0(完全透明)并可用作RGB或HSL调色板中的第4个参数。HSL并不通过红、绿、蓝成分定义颜色，而是通过色调、饱和度和亮度来定义。
你可以在http://www.w3.org/TR/css3-color找到关于HSL调色板的更多信息，^以及CSSColorModuleLevel3规范中的所有有效SVG颜色名。
仔细观察你可以看见条形后面的阴影，这些阴影是通过额外的4个context属性创建的：|context.shadowOffsetX=；context.shadowOffsetY=;context.shadowColor="rgba(50%^50%,50%>0.75)"；context.shadowBlur=；头两行代码通过shadowOffsetX及shadowOffsetY决定阴影的偏移；shadowColor定义其颜色及透明度；shadowBlur决定阴影模糊度，值越髙模糊程度越强。
在下节谈到颜色渐变之前，我们需要搞清楚如何为条形创建虚线边框。答案很简单：
通过CSS。所有canvas元素显然都可以通过CSS来制定样式。你可以像定义背景色及边界一样轻松地定义其间距、位置及z-index。在我们的案例中，下面的样式属性创建了虚线边框：
渐变
除了纯色线条及填充，Canvas还提供了两种渐变：线性渐变及辐射渐变。我们可以通过-个红一黄一橙一紫的简单渐变来演示Canvas中颜色渐变的基本原理(见图)。
首先，context.createLinearGradient(xO,yO,xl，yl)创建了一个CanvasGradient对象并通过参数xO、yO、xl、yl定义渐变方向。下一步我们还需要定义颜色的偏移量，因此我们先将此对象保存在变量HnGrad中：
varlinGrad=context.createLinearGradient(,)；
接着我们通过方法addColorStop(offset，color)为对象CanvasGradient选择渐变的颜色及偏移量。你可以想像一条虚构的斜线，Offset代表着坐标xO/yO上的颜色，而offset则代表着终点xl/yl上的颜色。中间的所有颜色将根据它们的偏移值被分割，并被浏览器在RGBA颜色空间中转换为插值。
linGrad.addColorStopf,'red');linGradaddColorStop(,'yellow');linGrad.addColorStopf,'orange'};linGrad.addColorStop(,'purple');颜色根据CSS颜色值规则被定义，并在我们的案例中转换为SVG颜色名以便阅读。
线性渐变完成后被赋值给fillStyle或strokeStyle:
context.fillStyle=linGrad;contextfillRect(50>l000,450)；与线性渐变不同，径向渐变的起点和终点并非点，而是圆，宁波网站建设认为因此在定义径向渐变的过程中，我们使用的是方法context.createRadialGradient(xO,yO,r0,xl,yl，rl)。
在图左侧，你可以看见起始圆和终点圆，图中间为三种终止色的偏移值，右侧则为最终结果：一个看上去好像在发光的球体。一段简洁的源代码可以完成这一切：
varradGrad=context.createRadialGradient(2,00);
radGrad.addColorStop^,'yellow*);
radGrad.addColorStopiO.9,'orange');
radGrad.addColorStop(,*rgba(,);context.fillStyle=radGrad;context.fillRect(,00);
球体的阴影效果通过后两种颜色，在橙色中加人透明黑色形成，这也意味着渐变的可视部分恰好终结于外圈。
快速完成了色彩及渐变后，我们转向另一个几何形模型：路径绘图。
本文由乐华网络编辑，转载请注明出处
宁波网站建设www.leseo.net
