<!-- 心电图背景canvas -->
<template>
  <canvas ref="grids"  :width="width+'px'" :height="height+'px'"></canvas>
</template>

<script>
export default {
  data() {
    return {
        width: 1230,
        height: 150,
        ctx: null
    };
  },
  mounted() {
    this.drawgrid()
  },
  methods: {
    /**绘制网格总函数
     * 分别绘制
     * drawSmallGrid小网格
     * drawMediumGrid中网格
     * drawBigGrid大网格
     */
    drawgrid() {
      let c_canvas = this.$refs.grids;
      this.drawSmallGrid(c_canvas,this.width,this.height);
    //   this.drawMediumGrid(c_canvas,this.width,this.height);
    //   this.drawBigGrid(c_canvas,this.width,this.height);
      return;
    },
    /**绘制小网格
     * 第一个for语句循环出纵向小方格细线条，间距为X轴方向3像素
     * 第二个for语句循环出横向小方格细线条，间距为Y轴方向3像素
     */
    drawSmallGrid(c_canvas,width,height) {
      this.ctx = c_canvas.getContext("2d");
      this.ctx.strokeStyle = "#f1dedf";
      this.ctx.strokeWidth = 1;
      this.ctx.beginPath();
      for (let x = 0; x < width; x += 6) {
        this.ctx.moveTo(x, 0);
        this.ctx.lineTo(x, width);
        this.ctx.stroke();
      }
      for (let y = 0; y < width; y += 6) {
        this.ctx.moveTo(0, y);
        this.ctx.lineTo(width, y);
        this.ctx.stroke();
      }
      this.ctx.closePath();
      return;
    },
    /**绘制中型网格
     * 第一个for语句循环出纵向中方格中线条，间距为X轴方向15像素，小网格的5倍
     * 第二个for语句循环出横向中方格中线条，间距为Y轴方向15像素，小网格的5倍
     */
    drawMediumGrid(c_canvas,width,height) {
      this.ctx = c_canvas.getContext("2d");
      this.ctx.strokeStyle = "#fdbeb9";
      this.ctx.strokeWidth = 2;
      //宽度是小网格的2倍
      this.ctx.beginPath();
      for (let x = 0; x < width; x += 30) {
        this.ctx.moveTo(x, 0);
        this.ctx.lineTo(x, width);
        this.ctx.stroke();
      }
      for (let y = 0; y < width; y += 30) {
        this.ctx.moveTo(0, y);
        this.ctx.lineTo(width, y);
        this.ctx.stroke();
      }
      this.ctx.closePath();
      return;
    },
    /**绘制大型网格
     * 第一个for语句循环出纵向大方格中线条，间距为X轴方向75像素，小网格的5倍
     * 第二个for语句循环出横向大方格中线条，间距为Y轴方向75像素，小网格的5倍
     */
    drawBigGrid(c_canvas,width,height) {
      this.ctx = c_canvas.getContext("2d");
      this.ctx.strokeStyle = "#e0514b";
      this.ctx.strokeWidth = 3;
      this.ctx.beginPath();
      for (let x = 0; x < width; x += 150) {
        this.ctx.moveTo(x, 0);
        this.ctx.lineTo(x, width);
        this.ctx.stroke();
      }
      for (let y = 0; y < width; y += 150) {
        this.ctx.moveTo(0, y);
        this.ctx.lineTo(width, y);
        this.ctx.stroke();
      }
      this.ctx.closePath();
      return;
    },
  },
};
</script>
 
<style lang="scss" scoped>
canvas {
    border: 1px solid #000;
}
</style>