vue canvas心电图

你可以使用Vue和Canvas来绘制心电图。首先，你需要在Vue组件中创建一个Canvas元素，然后在mounted钩子函数中获取Canvas对象。接下来，你可以使用Canvas的API来绘制心电图的线条和数据点。

以下是一个简单的示例代码：

<template>
  <div>
    <canvas ref="canvas" width="400" height="300"></canvas>
  </div>
</template>

<script>
export default {
  mounted() {
    this.drawElectrocardiogram();
  },
  methods: {
    drawElectrocardiogram() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');

      // 绘制背景
      ctx.fillStyle = '#f5f5f5';
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      // 绘制坐标轴
      ctx.strokeStyle = '#000000';
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.moveTo(0, canvas.height / 2);
      ctx.lineTo(canvas.width, canvas.height / 2);
      ctx.stroke();

      // 模拟心电图数据
      const data = [0, -10, 30, -20, 40, 10, -30, 0, 20, -10];

      // 绘制心电图线条
      ctx.strokeStyle = '#ff0000';
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.moveTo(0, canvas.height / 2 + data[0]);
      for (let i = 1; i < data.length; i++) {
        ctx.lineTo((canvas.width / (data.length - 1)) * i, canvas.height / 2 + data[i]);
      }
      ctx.stroke();
    },
  },
};
</script>

以上代码会在Canvas上绘制一个简单的心电图，你可以根据需要修改绘图的样式和数据。记得在Vue组件中引入该组件并进行使用。希望能帮到你！