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内里的径向渐变竟然搞的纷歧样了，出发点一个圆，终点一个圆，和我的领略有差距。 我们从最简朴的做起。起首，做一个很正规的径向渐变，即渐变圆形的圆心就是渐变的出发点。因为正规的径向渐变，中心即圆心，以是我们应该只管停止产生偏斜。那么，我们把终点圆的圆心与出发点圆的圆心重合吧？ 复制代码 代码如下: （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
