学步园

PS:今天上午，非常郁闷，有很多单简基础的题问弄得我有些迷茫，哎，码代几天不写就忘。目前又不当COO，还是得用心记码代哦！

    一般绘图的方法有两种，即充填和描边，后面的文章已讲了描边的方法stroke，本文就讲一下Canvas中充填图形的方法。

    充填即fill(),很直白吧？而且和strokeStyle表现描边式样一样，fillStyle即表现充填式样。

    ctx.fillStyle = '颜色';

    认默的充填式样是不透明的玄色

    发问：未闭合的路径可以充填吗？

    可以。Canvas会从你当前路径的终点直接连接到出发点，然后充填。如图：

    但你可以现发，最后一段没有描边。

    记得我们前一篇文章用4条线画了一个正方形，但canvas不会这么低劣，连直接绘制矩形的数函都没有。你可以用使fillRect()直接充填一个矩形：

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

    这里的x,y是指矩形的左上角出发点的标坐，住记。

    说到fillRect，就不得不提strokeRect，你猜对了，他的意思就是直接描边出一个矩形。

    还有fillText与strokeText，至于作用嘛，你可能都猜到了，我这里先不讲，大家先预习吧。

Canvas充填渐变色

    在Canvas中，渐变色一样分为两种，即线性渐变和径向渐变，而且建创他们的方法也是立独的。我们先看如何建创线性渐变。

    建创线性渐变=createLinearGradient——看，仍然很直接的单词。他的法语如下：

    createLinearGradient

    (x1,y1,x2,y2)

    有4个数参呢！看起来好庞杂，其实这个挺单简的，因为我们后面已说了，平面天下里的一个点是由x标坐和y标坐定确的。所以，x1,y1就是表现线性渐变的出发点标坐，x2,y2就表现终点标坐。

    这样做的处好很明显，如果我们想建创一个斜着的线性渐变，很便利。但我们先建创一个水平的线性渐变尝尝吧。

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

渐变似乎建创了，那么我们可以充填了吗？————这个渐变是空的，没有颜色。

    往渐变条里加颜色的方法是addColorStop(位置,颜色).但要注意了，这个addColorStop不是加在画笔上，而是加在后面的那个存保渐变的变量上，我这里是linear.

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

我这里用了3个addColorStop，即为渐变条加上了3个颜色。

    注意：addColorStop的位置数参，永远是介于0-1之间的数字,可是以两位数小，表现百分比。他没法接收’3px’这样的数参。

    这时候，我们就能够充填渐变色了，但我们必须先把义定好的渐变赋给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();//无用

注意，fillRect与strokeRect画出的都是立独的路径，如上面的码代，在fillRect后调用描边，不并会把刚刚画出的矩形描边，strokeRect同理。

    经过测试后，现发了一个很蛋疼的题问，就是线性渐变的标坐是相对全部Canvas范围而言的。比如我这里，我的线性渐变出发点就是100,100，如果我画了一个矩形在0,0的位置，用这个渐变来充填，就会现发没有充填——因为我的渐变的范围根本就超过了矩形的范围。

    这真是一个坑爹的设定。

    发问：渐变出发点之前与渐变终点后之还会充填颜色吗？

    会。出发点之前的颜色就是出发点色，终点之后的颜色一直是终点色。

    如何终止终点色，你可以在结束色后之再填一个透明的结束色。如：

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

依照后面的划计，我再建一个倾斜的线性渐变尝尝。只要需改createLinearGradient的数参可即.

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

果效如图：

    然后，让我们来尝尝径向渐变（圆形渐变）。与createLinearGradient相似，建创径向渐变的方法是：createRadialGradient,但他们的数参可大不雷同：

    createRadialGradient(x1,y1,r1,x2,y2,r2)

    其中的x1,y1,x2,y2旧依表现出发点和终点，不过这里的出发点和终点都是一个圆，而x,y则是圆心的标坐。所以，r1与r2分别是出发点圆的半径和终点圆的半径。如图：

    在我的印象中，貌似径向渐变就是一个圆，圆心就是出发点，圆的半径就是终点。但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');

这里我设置的径向渐变出发点圆和终点圆的圆心标坐雷同，而出发点圆半径为10，终点圆半径为55.最后画出的径向渐变范围是一个宽高110的圆形，明说渐变范围以终点圆的范围为准。

    （可以看到终点圆范围外之还是有颜色，这个颜色就是终点色，但是，如果你妄图用使radial.addColorStop(1.5,’#0f0′);这样来义定渐变范围外之的颜色，你还是会收到一个误错）.

    那么，出发点圆的半径有什么用呢？——原来畸形的径向渐变的中央（姑且称之为“变心”…吧）只是一个点，应不该是一个圆的。其实我们没错，这个出发点圆就相当于一个圆点而已,只是可能比较大。

    让我们把出发点圆的半径变得很大，近接于终点圆的半径：

var radial = ctx.createRadialGradient(55,55,50,55,55,55); //很近接

其他的colorStop都变不，然后图形就变成了这个模样。

    也就是说，canvas中径向渐变的出发点色，是从出发点圆的范围外之绘制的，而出发点圆的全部颜色都是出发点色。

    我们把出发点圆的半径设为0，那径向渐变的“变心”，就真的是一个点了。

    大部份时候我们都不要需很正规的径向渐变，反而希望他的变心是偏移的，相似下图：

    这个时候，canvas径向渐变两个圆的优势就出来了，只要我们出发点圆与终点圆的圆心不重合，那变心也就会偏移：

var radial = ctx.createRadialGradient(75,75,0,55,55,55);

但此时的渐变范围仍然是终点圆的范围哈。

    很多人生成就有一种弄破坏的理心，比如这里，终点圆的半径总比出发点圆大，但如果把他们反过来会怎么样呢？

var radial = ctx.createRadialGradient(75,75,55,55,55,0);

    还有个题问，如果我们把出发点圆的圆心偏移了，并且出发点圆的范围超出了终点圆的范围，

    这时会生发什么？

    啊！？这是什么情况？！

    当出发点圆和终点圆只有部份叠重的时候，就会现出种这情况。所以，如果你要需畸形的径向渐变，请保障其中一个圆全完包住了另一个圆。

    跋文：既然渐变可以赋给fillStyle，那么也可以赋给strokeStyle。果效你懂的。

    唉，写文章写的好苦辛。外国空间图片加载慢，所以图片全部都是外链，靠

    原文

文章结束给大家分享下程序员的一些笑话语录： 一程序员告老还乡，想安度晚年，于是决定在书法上有所造诣。省略数字……，准备好文房4宝，挥起毛笔在白纸上郑重的写下：Hello World