Canvas填色技巧大揭秘！让图形炫酷又多彩

Canvas中的填充图形

Canvas中画图主要有填色与描线两大招。咱们前文讲过描线的手法stroke，现在就来好好说说如何用canvas来填色！其实就是从起点连到终点再填充上颜色而已。比起描线，填色能让图形看起来更炫酷！

ctx.fillRect(x,y,width,height);

Canvas里没直接画矩形的功能，但咱能借用fillRect方法来搞定它。记住这个fillRect方法里的x和y，指的就是矩形左上角的位置~除此之外，还得跟你说说那个strokeRect方法，它能帮你把矩形的轮廓勾勒出来，两个结合起来，就能画出五彩斑斓的形状！

线性渐变色填充

Canvas里的渐变色可分成直线和圆弧两种，每种都有自己独特的做法。比如[CREATE LINEAR GRADIENT](这是一个方法名)，它就能弄出各种角度、位置的线性渐变效果。其实，我们平时在平面图上看到的点点，都是用x和y坐标表示的对，Canvas也不例外。

var linear = ctx.createLinearGradient(100,100,200,100); 
linear.addColorStop(0,'#fff'); 
linear.addColorStop(0.5,'#f0f'); 
linear.addColorStop(1,'#333');

要让渐变色五颜六色，就用addColorStop方法在梯度线上添加各种颜色的“点”，比如位置在哪儿，什么颜色。记得这个方法不是加到笔画上，而是加在存储了梯度信息的那块变量。这样设定颜色停靠点，就能做出精彩多变、顺滑过渡的渐变色。当然，别忘了在开始填充前，把做好的梯度过渡值（也就是你设定的那些颜色停靠点）分配给 fillStyle属性！

径向渐变色填充

var linear = ctx.createLinearGradient(100,100,200,100); 
linear.addColorStop(0,'#fff'); 
linear.addColorStop(0.5,'#f0f'); 
linear.addColorStop(1,'#333'); 
ctx.fillStyle = linear; //把渐变赋给填充样式 
ctx.fillRect(100,100,100,100); 
ctx.stroke();

Canvas里，除了那个老样子的直线渐变之外，还有个新花样叫作径向渐变！要用到createRadialGradient方法来做。和直线渐变不太一样，这个径向渐变得输入更多参数，比如开始的和最终的圆形位置。记住，在Canvas里，开始和结束的圆形可是有特殊含义的，所以在实际用的时候要随机应变哈。

说到图里那个圈圈的渐变色效果，咱们说的”变心”其实就在说它的中间部位；在canvas这个东西上，起始圈和终止圈之间是有联系嘞。只要咱们动动手，调调它们的大小、位置什么的，就能让圈圈有各种变化了，颜色啊、方向啊也能自如控制。当然，记得别让起始圈和终止圈重叠起来，不然可能会出现一些意想不到的效果哟~

特殊情况下的处理

linear.addColorStop(0.99,'#333'); 
linear.addColorStop(1,'rgba(51,51,51,0)');

画图时要注意些特别的事儿，就像处理线性或径向渐变时要注意范围，绘起点和终点要确保不重叠之类的。这时候，要用好Canvas的API，根据实际需求来解决！

var linear = ctx.createLinearGradient(100,100,200,200);

记住，fillRect和strokeRect画出来的路径是各自独立的，没啥关系。所以我们画图时得看清楚当前路径是什么样子，还有要用哪种样式。别搞错了，免得出现意料之外的效果。

总结与展望

看了这篇文章，你应该会知道怎么在HTML5的Canvas里搞未盖完的路径和颜色变化！不管是直线还是环形的渐变色，其实学点基础知识再加上使用API，用起来就没什么难度，到时候肯定能很好地运用到自己的创作上！

canvas画图，需要琢磨细枝末节，还要按需选颜色和调参数！推荐多练，才能搞懂这门手艺，画出更具魅力的作品来。

var radial = ctx.createRadialGradient(55,55,10,55,55,55); //重合的圆心坐标 
radial.addColorStop(0,'#fff'); 
radial.addColorStop(0.5,'#ff0'); 
radial.addColorStop(0.9,'#555'); 
radial.addColorStop(1,'#f00');

真心希望这篇文章能给各位带来点灵感！让我们更得心应手地驾驭HTML5canvas。另外，大家猜猜看：做项目怎么用好Canvas画图？快把你们宝贵的想法和心得分享出来！

。