html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
发布时间：2020-09-19 12:07:56 所属栏目：MySql教程 来源：互联网
导读：一般绘图的方式有两种，即填充和描边，前面的文章已经讲了描边的方法stroke，本文就讲一下Canvas中填充图形的方法
|
这里我设置的径向渐变起点圆和终点圆的圆心坐标相同，而起点圆半径为10，终点圆半径为55.最后画出的径向渐变范围是一个宽高110的圆形，说明渐变范围以终点圆的范围为准。 （可以看到终点圆范围之外还是有颜色，这个颜色就是终点色，但是，如果你企图使用radial.addColorStop(1.5,’#0f0′);这样来定义渐变范围之外的颜色，你还是会收到一个错误）. 那么，起点圆的半径有什么用呢？——本来正常的径向渐变的中心（姑且称之为“变心”…吧）只是一个点，不应该是一个圆的。其实我们没错，这个起点圆就相当于一个圆点而已,只是可能比较大。 让我们把起点圆的半径变得很大，接近于终点圆的半径： 复制代码 代码如下: 其他的colorStop都不变，然后图形就变成了这个样子。 也就是说，canvas中径向渐变的起点色，是从起点圆的范围之外绘制的，而起点圆的整个颜色都是起点色。 我们把起点圆的半径设为0，那径向渐变的“变心”，就真的是一个点了。 大部分时候我们都不需要很正规的径向渐变，反而希望他的变心是偏移的，类似下图： 这个时候，canvas径向渐变两个圆的优势就出来了，只要我们起点圆与终点圆的圆心不重合，那变心也就会偏移： var radial = ctx.createRadialGradient(75,75,0,55,55,55);但此时的渐变范围依然是终点圆的范围哈。 很多人天生就有一种搞破坏的心理，比如这里，终点圆的半径总比起点圆大，但如果把他们反过来会怎么样呢？ 复制代码 代码如下: 经测试，这样不会报错，只是原来的从内到外的渐变反过来变成了从外到内的渐变了。这是个好用法。 还有个问题，如果我们把起点圆的圆心偏移了，并且起点圆的范围超出了终点圆的范围， 这时会发生什么？ 啊！？这是什么情况？！ 当起点圆和终点圆只有部分重叠的时候，就会出现这种情况。所以，如果你需要正常的径向渐变，请保证其中一个圆完全包住了另一个圆。 另外，既然渐变可以赋给fillStyle，那么也可以赋给strokeStyle。效果你懂的。 （编辑：焦作站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |