手把手教你在微信小程序中使用canvas绘制天气折线图（附代码）
微信小程序中如何绘制天气折线图？下面本篇文章就来给大家介绍一下在微信小程序中使用canvas绘制天气折线图的方法，以及使用三阶贝塞尔曲线拟合温度点，使之变得圆滑，曲线底部有背景色，希望对大家有所帮助！
折线
效果图：
自定义组件 line-chart
登录后复制
因为不知道温度数值有多少个，因此这里的 width 动态传入
有个小问题，就是宽度过大的话真机不会显示...
// 获取 scroll-view 的总宽度 wx.createSelectorQuery() .select('.hourly') .boundingClientRect(rect => { this.setData({ scrollWidth: rect.right - rect.left, }); }) .exec();登录后复制
.scroll { position: relative; height: 150px; width: 100%; } .hourly { display: flex; height: 150px; position: absolute; top: 0; } .hourly > view { min-width: 3.5em; text-align: center; } .line { // 折线图绝对定位到底部 position: absolute; bottom: 0; }登录后复制
主要是不知道墨迹天气怎么实现的，只能暂时这样
三阶贝塞尔曲线
效果图
emmm，好像并不怎么圆滑
计算控制点
首先写一个点类
class Point { constructor(x, y) { this.x = x; this.y = y; } }登录后复制
http://wx.karlew.com/canvas/bezier/
https://wenku.baidu.com/view/c790f8d46bec0975f565e211.html
