前言

之前写的一个心电图vue组件，发现数据量大时渲染速度极慢，想了想是不是可以用先生成图片再渲染，于是开干（新手请大佬们多多指点哈）

一、创建EcgClass（canvas生成图片类）

class EcgClass {
   
  w
  h
  canvas
  context
  img
  s = 10
  /**
   * 
   * @param {*} s 秒
   * @param {*} h 高度
   * @returns 
   */
  initGrid (s, h = 600) {
   
    const canvas = document.createElement('canvas')
    this.canvas = canvas
    this.context = this.canvas.getContext('2d')
    this.s = s
    this.w = canvas.width = 125 * s // 根据显示多少秒计算图片宽度
    this.h = canvas.height = h
    this.drawSmallGrid()
    this.drawMediumGrid()
    this.drawBigGrid()
    return new Promise((resolve) => {
   
      this.img = canvas.toDataURL()
      this.imgDom = new Image()
      this.imgDom.src = this.img
      this.imgDom.onload = () => {
   
        resolve(this.img)
      }