html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
副标题[/!--empirenews.page--]
一般绘图的方式有两种,即填充和描边,前面的文章已经讲了描边的方法stroke,本文就讲一下Canvas中填充图形的方法。 填充即fill(),很直白吧?而且和strokeStyle表示描边样式一样,fillStyle即表示填充样式。 ctx.fillStyle = '颜色';默认的填充样式是不透明的黑色 提问:未闭合的路径可以填充吗? 可以。Canvas会从你当前路径的终点直接连接到起点,然后填充。如图: 但你可以发现,最后一段没有描边。 记得我们前一篇文章用4条线画了一个正方形,但canvas不会这么差劲,连直接绘制矩形的函数都没有。你可以使用fillRect()直接填充一个矩形: 复制代码 代码如下: 这里的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. 复制代码 代码如下: 我这里用了3个addColorStop,即为渐变条加上了3个颜色。 注意:addColorStop的位置参数,永远是介于0-1之间的数字,可以是两位小数,表示百分比。他没法接收’3px’这样的参数。 这时候,我们就可以填充渐变色了,但我们必须先把定义好的渐变赋给fillStyle. 复制代码 代码如下: 注意,fillRect与strokeRect画出的都是独立的路径,如上面的代码,在fillRect后调用描边,并不会把刚刚画出的矩形描边,strokeRect同理。 经过测试后,发现了一个很蛋疼的问题,就是线性渐变的坐标是相对于整个Canvas范围而言的。比如我这里,我的线性渐变起点就是100,100,如果我画了一个矩形在0,0的位置,用这个渐变来填充,就会发现没有填充——因为我的渐变的范围根本就超过了矩形的范围。 这真是一个坑爹的设定。 提问:渐变起点之前与渐变终点之后还会填充颜色吗? 会。起点之前的颜色就是起点色,终点之后的颜色一直是终点色。 如何终止终点色,你可以在结束色之后再填一个透明的结束色。如: 复制代码 代码如下: 依照前面的计划,我再建一个倾斜的线性渐变试试。只需要改createLinearGradient的参数即可. 复制代码 代码如下: 效果如图: 然后,让我们来试试径向渐变(圆形渐变)。与createLinearGradient类似,创建径向渐变的方法是:createRadialGradient,但他们的参数可大不相同: createRadialGradient(x1,y1,r1,x2,y2,r2)其中的x1,y1,x2,y2依旧表示起点和终点,不过这里的起点和终点都是一个圆,而x,y则是圆心的坐标。所以,r1与r2分别是起点圆的半径和终点圆的半径。如图: 在我的印象中,貌似径向渐变就是一个圆,圆心就是起点,圆的半径就是终点。但canvas里面的径向渐变竟然搞的不一样了,起点一个圆,终点一个圆,和我的理解有差距。 我们从最简单的做起。首先,做一个很正规的径向渐变,即渐变圆形的圆心就是渐变的起点。由于正规的径向渐变,中心即圆心,所以我们应该尽量避免发生偏斜。那么,我们把终点圆的圆心与起点圆的圆心重合吧? 复制代码 代码如下: (编辑:西双版纳站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |