canvas绘制飞线效果
在我们做的可视化大屏项目中,经常会遇到飞线的效果。 在我们的大屏编辑器中,可以通过拖拽+配置参数的方式很快就能够实现。下面是我们使用大屏编辑器实现的一个项目效果: 中间地图就有飞线的效果。 抛开编辑器的快速实现不说,我们大致来说下canvas绘制飞线的大致原理。 贝塞尔曲线 飞线的路径主要是一个贝塞尔曲线,canvas绘制贝塞尔曲线比较容易。canvas支持绘制二次和三次,在本次示例中,主要还是绘制二次贝塞尔曲线为主。canvas中指定二次贝塞尔曲线路径的函数如下: ctx.quadraticCurveTo(cpx, cpy, x, y); 有关贝塞尔曲线的基础知识,读者可以自行学习,此处不再赘述。 渐变实现 从图中,可以看出飞线的效果是淡入的效果,颜色并不是一致的,起点处颜色很淡,终点处颜色就比较浓厚。 怎么样能够实现这种效果呢? 答案就是渐变,我们知道,canvas支持线性渐变和放射渐变。但是这两种渐变似乎都不太适合曲线的路径。 事实上,我们会考虑使用线性渐变。因为飞线效果中,曲线的弯曲程度都不太大,所以使用线性渐变,曲线造成的差异,人眼是感觉不出来的。 嗯嗯,图形学就是欺骗的艺术。 只要在线的起点和终点创建一个线性渐变,起点的颜色非透明度是0,终点的非透明度是1即可达到目标。 示例代码如下: function createGradient(ctx,p0,p1){ var