手把手教你在微信小程序中使用canvas绘制天气折线图（附代码）

微信小程序中如何绘制天气折线图？下面本篇文章就来给大家介绍一下在微信小程序中使用canvas绘制天气折线图的方法，以及使用三阶贝塞尔曲线拟合温度点，使之变得圆滑，曲线底部有背景色，希望对大家有所帮助！

折线

效果图：

自定义组件 line-chart

<canvas type="2d" id="line" class="line-class" style="width:{{width}}px;height:{{height}}px" />

Component({  externalClasses: ['line-class'],  properties: {    width: String,    height: String,    data: Array,  },  observers: {    width() {      // 这里监听 width 变化重绘 canvas      // 动态传入 width 好像只能这样了..      const query = this.createSelectorQuery();      query        .select('#line')        .fields({ node: true, size: true })        .exec(res => {          const canvas = res[0].node;          const ctx = canvas.getContext('2d');          const width = res[0].width; // 画布宽度          const height = res[0].height; // 画布高度           console.log(`宽度: ${width}, 高度: ${height}`);           const dpr = wx.getSystemInfoSync().pixelRatio;          canvas.width = width * dpr;          canvas.height = height * dpr;          ctx.scale(dpr, dpr);           // 开始绘图          this.drawLine(ctx, width, height, this.data.data);        });    },  },  methods: {    drawLine(ctx, width, height, data) {      const Max = Math.max(...data);      const Min = Math.min(...data);       // 把 canvas 的宽度, 高度按一定规则平分      const startX = width / (data.length * 2), // 起始点的横坐标 X        baseY = height * 0.9, // 基线纵坐标 Y        diffX = width / data.length,        diffY = (height * 0.7) / (Max - Min); // 高度预留 0.2 写温度       ctx.beginPath();      ctx.textAlign = 'center';      ctx.font = '13px Microsoft YaHei';      ctx.lineWidth = 2;      ctx.strokeStyle = '#ABDCFF';       // 画折线图的线      data.forEach((item, index) => {        const x = startX + diffX * index,          y = baseY - (item - Min) * diffY;         ctx.fillText(`${item}°`, x, y - 10);        ctx.lineTo(x, y);      });      ctx.stroke();       // 画折线图背景      ctx.lineTo(startX + (data.length - 1) * diffX, baseY); // 基线终点      ctx.lineTo(startX, baseY); // 基线起点      const lingrad = ctx.createLinearGradient(0, 0, 0, height * 0.7);      lingrad.addColorStop(0, 'rgba(255,255,255,0.9)');      lingrad.addColorStop(1, 'rgba(171,220,255,0)');      ctx.fillStyle = lingrad;      ctx.fill();       // 画折线图上的小圆点      ctx.beginPath();      data.forEach((item, index) => {        const x = startX + diffX * index,          y = baseY - (item - Min) * diffY;         ctx.moveTo(x, y);        ctx.arc(x, y, 3, 0, 2 * Math.PI);      });      ctx.fillStyle = '#0396FF';      ctx.fill();    },  },});

data 就是温度数组，如 [1, 2, ...]

因为不知道温度数值有多少个，因此这里的 width 动态传入

有个小问题，就是宽度过大的话真机不会显示...

// 获取 scroll-view 的总宽度wx.createSelectorQuery().select('.hourly').boundingClientRect(rect => { this.setData({   scrollWidth: rect.right - rect.left, });}).exec();

<view class="title">小时概述</view><scroll-view scroll-x scroll-y class="scroll" show-scrollbar="{{false}}" enhanced="{{true}}">    <view class="hourly">      <view wx:for="{{time}}" wx:key="index">{{item}}</view>    </view>    <line-chart line-class="line" width="{{scrollWidth}}" height="100" data="{{temp}}" /></scroll