基于canvas使用贝塞尔曲线平滑拟合折线段

Annnnty

于 2017-12-10 17:57:23 发布

阅读量8k

点赞数 2

分类专栏： JavaScript Canvas

本文链接：https://blog.csdn.net/weixin_40346046/article/details/78766141

版权

本次分享一下在canvas中将绘制出来的折线段的棱角“磨平”，也就是通过贝塞尔曲线穿过各个描点来代替原有的折线图。

欢迎关注我的博客，不定期更新中——

先来看下Echarts下折线图的渲染效果：

一开始我没注意到其实这个折线段是曲线穿过去的，只认为是单纯的描点绘图，所以起初我实现的“简(丑)易(陋)”版本是这样的：

不要关注样式，重点就是实现之后才发现看起来人家Echarts的实现描点非常的圆滑，也由此引发了之后的探讨。怎么有规律的画平滑曲线？

先来看下最终模仿的实现：
因为我也不知道Echarts内部怎么实现的（逃

看起来已经非常圆润了，和我们最初的设想十分接近了。再看下曲线是否穿过了描点：

好的！结果很明显现在来重新看下我们的实现方式。

var data = [Math.random() * 300];
        for (var i = 1; i < 50; i++) { //按照echarts
            data.push(Math.

关注

专栏目录