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');
注意: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();//无用
经过测试后,现发了一个很蛋疼的题问,就是线性渐变的标坐是相对全部Canvas范围而言的。比如我这里,我的线性渐变出发点就是100,100,如果我画了一个矩形在0,0的位置,用这个渐变来充填,就会现发没有充填——因为我的渐变的范围根本就超过了矩形的范围。
这真是一个坑爹的设定。
发问:渐变出发点之前与渐变终点后之还会充填颜色吗?
会。出发点之前的颜色就是出发点色,终点之后的颜色一直是终点色。
如何终止终点色,你可以在结束色后之再填一个透明的结束色。如:
linear.addColorStop(0.99,'#333');
linear.addColorStop(1,'rgba(51,51,51,0)');
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');
(可以看到终点圆范围外之还是有颜色,这个颜色就是终点色,但是,如果你妄图用使radial.addColorStop(1.5,’#0f0′);这样来义定渐变范围外之的颜色,你还是会收到一个误错).
那么,出发点圆的半径有什么用呢?——原来畸形的径向渐变的中央(姑且称之为“变心”…吧)只是一个点,应不该是一个圆的。其实我们没错,这个出发点圆就相当于一个圆点而已,只是可能比较大。
让我们把出发点圆的半径变得很大,近接于终点圆的半径:
var radial = ctx.createRadialGradient(55,55,50,55,55,55); //很近接
也就是说,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