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

一、Introduction

微信小程序是基于微信生态圈中的一个轻量级应用，拥有丰富的API接口和独立的开发工具。在本文中，我们将实现通过在小程序中使用canvas绘制天气折线图。

二、关于Canvas

Canvas是HTML5新增的一种标签，可以通过JS绘制图形，包括基本的几何图形、路径、图像以及动画等等。而且对于小程序开发，只需要在小程序的wxml文件中添加canvas组件即可。

三、如何实现

1. 在wxml页面添加canvas组件

首先，在需要显示折线图的位置添加一个canvas标签，设置canvas宽高即可。

<canvas canvas-id="line-chart" style="width:100%; height:240rpx;">

2. 获取canvas上下文

在JS代码文件中，需要使用wx.createCanvasContext()函数获取canvas上下文，然后使用canvas提供的绘制方法绘制图形。

如下所示，我们可以通过wx.createCanvasContext()函数创建canvas绘图上下文。

let context = wx.createCanvasContext('line-chart')

3. 绘制折线图

绘制折线图的流程：

先确定整个canvas的大小和坐标系的起点。

计算每个数据点在canvas上的坐标。

依次连接每个数据点，最终形成一条折线。

绘制X轴和Y轴上的刻度。

4. 处理数据

为了绘制折线图，我们需要一些数据。在此我们使用一个数据集合，如下所示：

const data = [
  {time: '1', temp: 14},
  {time: '2', temp: 16},
  {time: '3', temp: 18},
  {time: '4', temp: 20},
  {time: '5', temp: 17},
  {time: '6', temp: 13},
  {time: '7', temp: 11}
];

其中，temp表示温度，time表示对应的时间，我们拥有这些数据，便可以进行绘制。

5. 绘制坐标系

我们需要定义画布的宽高以及坐标系的起点坐标，和x,y轴的长度：

// 画布的宽度
const width = 375,
      // 画布的高度
      height = 240,
      // x轴起点坐标
      startX = 35,
      // y轴起点坐标
      startY = height - 35,
      // x轴长度
      xAxisLength = width - startX - 35,
      // y轴长度
      yAxisLength = height - startY - 20;

然后需要绘制X轴和Y轴，并在上面绘制刻度和文字。

// 绘制X轴
context.beginPath()
context.moveTo(startX, startY)
context.lineTo(width - 20, startY)
context.stroke();
// 绘制Y轴
context.beginPath()
context.moveTo(startX, startY)
context.lineTo(startX, 20)
context.stroke();
// 绘制X轴坐标
context.setFontSize(10)
for (let i = 0; i < data.length; i++) {
  let offset = xAxisLength / (data.length - 1)
  context.fillText(data[i].time, startX + i * offset, startY + 15)
}
// 绘制Y轴坐标
context.setFontSize(12)
for (let i = 0; i <= 6; i++) {
  let offset = yAxisLength / 6
  context.fillText((i * 5).toString(), startX - 20, startY - i * offset)
}

6. 绘制折线图

最后我们需要绘制数据的折线，通过循环数据集合data中的温度数据，找到每一个坐标点进行绘制。

context.beginPath()
context.setLineWidth(2)
context.setStrokeStyle('green')
let base = Math.min(...data.map(({temp}) => temp)),
    range = Math.max(...data.map(({temp}) => temp)) - base,
    step = xAxisLength / (data.length - 1);
data.forEach(({temp}, index) => {
  let x = index * step + startX,
      y = startY - (temp - base) / range * yAxisLength;
  if (index === 0) {
    context.moveTo(x, y)
  } else {
    context.lineTo(x, y)
  }
})
context.stroke()

四、 总结

到此，我们已经实现了在微信小程序中使用canvas绘制天气折线图。Canvas不仅能够绘制图形，还可以进行各种变换，在实际项目中，还能结合其他框架进行动态的图形绘制。