vue canvas网格心电图

要绘制网格心电图，你可以在上述的基础上进行一些修改。以下是一个示例代码，它将在Canvas上绘制一个包含网格的心电图：

<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);

      // 设置网格样式
      const gridColor = '#cccccc';
      const gridSize = 10;

      // 绘制网格
      ctx.strokeStyle = gridColor;
      ctx.lineWidth = 0.5;
      for (let x = gridSize; x < canvas.width; x += gridSize) {
        ctx.beginPath();
        ctx.moveTo(x, 0);
        ctx.lineTo(x, canvas.height);
        ctx.stroke();
      }
      for (let y = gridSize; y < canvas.height; y += gridSize) {
        ctx.beginPath();
        ctx.moveTo(0, y);
        ctx.lineTo(canvas.width, y);
        ctx.stroke();
      }

      // 绘制坐标轴
      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>

在这个示例中，我们添加了绘制网格的部分。通过循环绘制水平和垂直线条，可以创建网格效果。你可以根据需要调整网格的颜色和大小。希望这个示例能满足你的需求！