uni-app Canvas 心电波形图

在uni-app中使用Canvas绘制心电波形图，你可以利用Canvas API来实现。以下是一个简单的示例代码，用于在uni-app的页面中绘制心电波形图。

首先，确保你已经在pages.json中配置了一个页面用于展示Canvas。

{
  "pages": [
    {
      "path": "pages/ecg/ecg",
      "style": {
        "navigationBarTitleText": "心电波形图"
      }
    }
  ]
}

然后，在pages/ecg/ecg.vue文件中编写以下代码：

<template>
  <view class="container">
    <canvas canvas-id="ecgCanvas" style="width: 100%; height: 300px;"></canvas>
  </view>
</template>

<script>
export default {
  onLoad() {
    this.drawECG();
  },
  methods: {
    drawECG() {
      const ctx = uni.createCanvasContext('ecgCanvas');
      const width = uni.getSystemInfoSync().windowWidth;
      const height = 300;
      const data = this.generateECGData(width); // 生成模拟心电数据

      ctx.setStrokeStyle('#ff0000');
      ctx.setLineWidth(2);
      ctx.beginPath();

      data.forEach((value, index) => {
        const x = index * (width / data.length);
        const y = height / 2 - value * 10; // 调整Y轴比例以适应画布
        if (index === 0) {
          ctx.moveTo(x, y);
        } else {
          ctx.lineTo(x, y);
        }
      });

      ctx.stroke();
      ctx.draw();
    },
    generateECGData(length) {
      const data = [];
      for (let i = 0; i < length; i++) {
        data.push(Math.sin(i * 0.1) * 50 + Math.random() * 20 - 10); // 模拟波形数据
      }
      return data;
    }
  }
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
</style>

在这个示例中，我们做了以下几件事：

1. 在<template>部分定义了一个Canvas元素。
2. 在<script>部分，我们定义了drawECG方法，用于绘制心电波形图。
3. generateECGData方法生成模拟的心电数据，这里使用正弦函数加上一些随机噪声来模拟心电波形。
4. 使用uni.createCanvasContext获取Canvas上下文，然后设置线条样式并开始绘制路径。
5. 通过循环遍历数据点，计算每个点的坐标，并使用lineTo方法连接这些点。
6. 最后调用stroke和draw方法完成绘制。

这个示例代码提供了一个基础框架，你可以根据实际需求调整数据生成逻辑和绘制样式。