首页 > 编程开发 > HTML/html5

使用canvas仿Echarts实现金字塔图的实例代码

来自：网络
时间：2021-11-15
阅读：

前言

最近公司项目都偏向于数字化大屏展示，而这次发给我的项目原型中出现了一个金字塔图， 好巧不巧，由于我们的图表都是使用Echarts，而Echarts中又不支持金字塔图，作为一个喜欢造轮子的前端开发，虽然自身技术不咋滴，但喜欢攻克难题的精神还是有的， 不断地内卷，才是我们这些普通前端开发的核心竞争力，所以就有了仿Echarts实现金字塔图的想法。

不多说先上效果

使用canvas仿Echarts实现金字塔图的实例代码

项目地址：(https://github.com/SHDjason/Pyramid.git)

正文

目前demo是基于vue2.x框架

项目实现可传入配置有：主体图位置（distance）、主体图偏移度（offset）、数据排序（sort）、图颜色（color）、数据文本回调（fontFormatter）、tooltip配置（tooltip）、数据展示样式配置（infoStyle）等

使用canvas仿Echarts实现金字塔图的实例代码

初始化canvas基本信息 并实现大小自适应

<template>
  <div id="canvas-warpper">
    <div id="canvas-tooltip"></div>
  </div>
</template>

先创建 canvas画布

      // 创建canvas元素
      this.canvas = document.createElement('canvas')
      // 把canvas元素节点添加在el元素下
      el.appendChild(this.canvas)
      this.canvasWidth = el.offsetWidth
      this.canvasHeight = el.offsetHeight
      // 将canvas元素设置与父元素同宽
      this.canvas.setAttribute('width', this.canvasWidth)
      // 将canvas元素设置与父元素同高
      this.canvas.setAttribute('height', this.canvasHeight)

获取画布中心点 方便后面做自适应和定点

 this.canvasCenter = [
        Math.round((this.canvasWidth - this.integration.distance[0] * 2) / 2) + this.integration.distance[0],
        Math.round((this.canvasHeight - this.integration.distance[1] * 2) / 2) + this.integration.distance[1]
      ]

监听传来的数据 并计算数据占比

刚好在这编写 数据排序（sort）的传入配置

  watch: {
    data: {
      immediate: true,
      deep: true,
      handler(newValue) {
        // 数据总量
        let totalData = 0
        newValue.forEach(element => {
          totalData = totalData + Number(element.value)
        })
        this.dataInfo = newValue.map(item => {
          const accounted = (item.value / totalData) * 100
          return { ...item, accounted, title: this.integration.title }
        })
        if (this.integration.sort === 'max') {
          this.dataInfo.sort((a, b) => {
            return a.value - b.value
          })
        } else if (this.integration.sort === 'min') {
          this.dataInfo.sort((a, b) => {
            return b.value - a.value
          })
        }
      }
    }
  },

下面可以确定金字塔4个基本点的位置了

这几个基本点的位置决定在后面金字塔展示的形状 可以根据自己的审美进行微调

 if (this.canvas.getContext) {
        this.ctx = this.canvas.getContext('2d')
        // 金字塔基本点位置
        this.point.top = [this.canvasCenter[0] - this.canvasWidth / 13, this.integration.distance[1]]
        this.point.left = [
          this.integration.distance[0] * 1.5,
          this.canvasHeight - this.integration.distance[1] - this.canvasHeight / 5
        ]
        this.point.right = [
          this.canvasWidth - this.integration.distance[0] * 1.9,
          this.canvasHeight - this.integration.distance[1] - this.canvasHeight / 5
        ]
        this.point.bottom = [
          this.canvasCenter[0] - this.canvasWidth / 13,
          this.canvasHeight - this.integration.distance[1]
        ]
        this.point.shadow = [
          this.integration.distance[0] - this.canvasCenter[0] / 5,
          this.canvasHeight / 1.2 - this.integration.distance[1]
        ]
        for (const key in this.point) {
          this.point[key][0] = this.point[key][0] + this.integration.offset[0]
          this.point[key][1] = this.point[key][1] + this.integration.offset[1]
        }
      } else {
        throw 'canvas下未找到 getContext方法'
      }

完整代码

      let el = document.getElementById('canvas-warpper')
      // 创建canvas元素
      this.canvas = document.createElement('canvas')
      // 把canvas元素节点添加在el元素下
      el.appendChild(this.canvas)
      this.canvasWidth = el.offsetWidth
      this.canvasHeight = el.offsetHeight
      // 将canvas元素设置与父元素同宽
      this.canvas.setAttribute('width', this.canvasWidth)
      // 将canvas元素设置与父元素同高
      this.canvas.setAttribute('height', this.canvasHeight)
      this.canvasCenter = [
        Math.round((this.canvasWidth - this.integration.distance[0] * 2) / 2) + this.integration.distance[0],
        Math.round((this.canvasHeight - this.integration.distance[1] * 2) / 2) + this.integration.distance[1]
      ]
      if (this.canvas.getContext) {
        this.ctx = this.canvas.getContext('2d')
        // 金字塔基本点位置
        this.point.top = [this.canvasCenter[0] - this.canvasWidth / 13, this.integration.distance[1]]
        this.point.left = [
          this.integration.distance[0] * 1.5,
          this.canvasHeight - this.integration.distance[1] - this.canvasHeight / 5
        ]
        this.point.right = [
          this.canvasWidth - this.integration.distance[0] * 1.9,
          this.canvasHeight - this.integration.distance[1] - this.canvasHeight / 5
        ]
        this.point.bottom = [
          this.canvasCenter[0] - this.canvasWidth / 13,
          this.canvasHeight - this.integration.distance[1]
        ]
        this.point.shadow = [
          this.integration.distance[0] - this.canvasCenter[0] / 5,
          this.canvasHeight / 1.2 - this.integration.distance[1]
        ]
        for (const key in this.point) {
          this.point[key][0] = this.point[key][0] + this.integration.offset[0]
          this.point[key][1] = this.point[key][1] + this.integration.offset[1]
        }
      } else {
        throw 'canvas下未找到 getContext方法'
      }
      this.topAngle.LTB = this.angle(this.point.top, this.point.left, this.point.bottom)
      this.topAngle.RTB = this.angle(this.point.top, this.point.right, this.point.bottom)
      // 计算各数据点位置
      this.calculationPointPosition(this.dataInfo)
    },

计算金字塔每条边的角度

为了后面给每个数据定点 但是 唉～ 奈何数学太差 所以我就想到了一个方法 ：

每条数据的定点范围肯定都是在 四个基本点的连线上。那我把每个基本点连线的角度求出来 ，到时候 在进行角度翻转到垂直后 再求每个条数据所占当前基本点连线的占比不就行了？

 /**
   * @description: 求3点之间角度
   * @return {*} 点 a 的角度
   * @author: 舒冬冬
   */
  angle(a, b, c) {
      const A = { X: a[0], Y: a[1] }
      const B = { X: b[0], Y: b[1] }
      const C = { X: c[0], Y: c[1] }
      const AB = Math.sqrt(Math.pow(A.X - B.X, 2) + Math.pow(A.Y - B.Y, 2))
      const AC = Math.sqrt(Math.pow(A.X - C.X, 2) + Math.pow(A.Y - C.Y, 2))
      const BC = Math.sqrt(Math.pow(B.X - C.X, 2) + Math.pow(B.Y - C.Y, 2))
      const cosA = (Math.pow(AB, 2) + Math.pow(AC, 2) - Math.pow(BC, 2)) / (2 * AB * AC)
      const angleA = Math.round((Math.acos(cosA) * 180) / Math.PI)
      return angleA
    }

计算各个数据点的位置

接下来就是确定每条数据的 绘画范围了

我们先把金字塔左边和有右边旋转垂直后的点的位置确定下来

/**
     * @description: 根据A点旋转指定角度后B点的坐标位置
     * @param {*} ptSrc 圆上某点(初始点);
     * @param {*} ptRotationCenter 圆心点
     * @param {*} angle 旋转角度°  -- [angle * M_PI / 180]:将角度换算为弧度
     * 【注意】angle 逆时针为正，顺时针为负
     * @return {*}
     * @author: 舒冬冬
     */
    rotatePoint(ptSrc, ptRotationCenter, angle) {
      const a = ptRotationCenter[0]
      const b = ptRotationCenter[1]
      const x0 = ptSrc[0]
      const y0 = ptSrc[1]
      const rx = a + (x0 - a) * Math.cos((angle * Math.PI) / 180) - (y0 - b) * Math.sin((angle * Math.PI) / 180)
      const ry = b + (x0 - a) * Math.sin((angle * Math.PI) / 180) + (y0 - b) * Math.cos((angle * Math.PI) / 180)
      const point = [rx, ry]
      return point
    },

const LP = this.rotatePoint(this.point.left, this.point.top, this.topAngle.LTB * -1)
      const RP = this.rotatePoint(this.point.right, this.point.top, this.topAngle.RTB)

LP 为 TL 的边 逆时针旋转 LTB 角度后的 点的位置

RP 为 TR 的边 顺时针旋转 RTB 角度后的 点的位置

使用canvas仿Echarts实现金字塔图的实例代码

这样就可以确定 每个数据点在 三条边上的各自所占长度了 完整代码
每个点的长度计算思路， 以在TL边上点为例：
拿到 LP （逆时针旋转 LTB角度后的位置）长度，根据数据所占总数据占比 求出该条数据的长度 再把角度转回去还原该边 就能拿到该条数据再 TL 边的上的位置信息。
const vertical = [ this.point.top[0], (LP[1] - this.point.top[1]) * (item.accounted / 100) + this.point.top[1] ]

  /**
    * @description: 计算数据的点位置
    * @param {*} val 点占比
    * @return {*}
    * @author: 舒冬冬
    */
   calculationPointPosition(val) {
     const LP = this.rotatePoint(this.point.left, this.point.top, this.topAngle.LTB * -1)
     const RP = this.rotatePoint(this.point.right, this.point.top, this.topAngle.RTB)
     let temporary = {
       left: [
         [0, 0],
         [0, 0],
         [0, 0]
       ],
       right: [
         [0, 0],
         [0, 0],
         [0, 0]
       ],
       middle: [
         [0, 0],
         [0, 0],
         [0, 0]
       ]
     }

     
     const dataInfo = val.map((item, index) => {
       if (index === 0) {
         for (const key in temporary) {
           if (key === 'left') {
             // 垂直后点的位置
             // 垂直后点点距离
             const vertical = [
               this.point.top[0],
               (LP[1] - this.point.top[1]) * (item.accounted / 100) + this.point.top[1]
             ]
             // 还原后点的位置
             temporary.left = [this.point.top, this.rotatePoint(vertical, this.point.top, this.topAngle.LTB), vertical]
           } else if (key === 'right') {
             // 垂直后点点距离
             const vertical = [
               this.point.top[0],
               (RP[1] - this.point.top[1]) * (item.accounted / 100) + this.point.top[1]
             ]
             // 还原后点的位置
             temporary.right = [
               this.point.top,
               this.rotatePoint(vertical, this.point.top, this.topAngle.RTB * -1),
               vertical
             ]
           } else if (key === 'middle') {
             // 垂直后点点距离
             temporary.middle = [
               this.point.top,
               [
                 this.point.top[0],
                 (this.point.bottom[1] - this.point.top[1]) * (item.accounted / 100) + this.point.top[1]
               ],
               [
                 this.point.top[0],
                 (this.point.bottom[1] - this.point.top[1]) * (item.accounted / 100) + this.point.top[1]
               ]
             ]
           }
         }
       } else {
         for (const key in temporary) {
           const vertical = JSON.parse(JSON.stringify(temporary[key][2]))
           if (key === 'left') {
             // 垂直后点点距离
             const vertical1 = [this.point.top[0], vertical[1] + (LP[1] - this.point.top[1]) * (item.accounted / 100)]
             // 还原后点的位置
             temporary.left = [
               this.point.top,
               this.rotatePoint(vertical1, this.point.top, this.topAngle.LTB),
               vertical1
             ]
           } else if (key === 'right') {
             // 垂直后点点距离
             const vertical1 = [this.point.top[0], vertical[1] + (RP[1] - this.point.top[1]) * (item.accounted / 100)]
             // 还原后点的位置
             temporary.right = [
               this.point.top,
               this.rotatePoint(vertical1, this.point.top, this.topAngle.RTB * -1),
               vertical1
             ]
           } else if (key === 'middle') {
             temporary.middle = [
               this.point.top,
               [this.point.top[0], (this.point.bottom[1] - this.point.top[1]) * (item.accounted / 100) + vertical[1]],
               [this.point.top[0], (this.point.bottom[1] - this.point.top[1]) * (item.accounted / 100) + vertical[1]]
             ]
           }
         }
       }

       return { ...item, temporary: JSON.parse(JSON.stringify(temporary)) }
     })
     this.dataInfo = dataInfo
   },

这样就拿到了每个数据在每一条边上所占长度的点位。

绘画

数据图层绘画

我们虽然拿到了每个数据在每一条边上所占长度的点位。 那怎么获取这条数据在该边上的所在的线段长度呢？
很简单 因为 第一条数据的在该边长度的第二个点的位置就是第二条数据的第一个点的位置
现在就可以进行下一步。
数据 图层的绘画了

   /**
    * @description: 数据图层绘画
    * @param {*}
    * @return {*}
    * @author: 舒冬冬
    */
   paintDataInfo() {
     // let data = JSON.parse(JSON.stringify(this.dataInfo))
     // data.reverse()
     var index = -1
     this.dataInfo = this.dataInfo.map(item => {
       index++
       if (this.integration.color.length === index) {
         index = 0
       }
       return { ...item, color: this.integration.color[index] }
     })
     this.dataInfo = this.dataInfo.map((item, index) => {
       let drawingPoint = []
       this.ctx.fillStyle = item.color
       this.ctx.beginPath()
       let point1, point2, point3, point4, point5, point6
       if (index === 0) {
         [point1, point2, point3, point4, point5, point6] = [
           item.temporary.left[0],
           item.temporary.left[1],
           item.temporary.middle[1],
           item.temporary.right[1],
           item.temporary.right[0],
           item.temporary.middle[0]
         ]
       } else {
         [point1, point2, point3, point4, point5, point6] = [
           this.dataInfo[index - 1].temporary.left[1],
           item.temporary.left[1],
           item.temporary.middle[1],
           item.temporary.right[1],
           this.dataInfo[index - 1].temporary.right[1],
           this.dataInfo[index - 1].temporary.middle[1]
         ]
       }
       this.ctx.moveTo(...point1)
       this.ctx.lineTo(...point2)
       this.ctx.lineTo(...point3)
       this.ctx.lineTo(...point4)
       this.ctx.lineTo(...point5)
       this.ctx.lineTo(...point6)
       drawingPoint = [point1, point2, point3, point4, point5, point6]
       if (this.integration.infoStyle.stroke) {
         this.ctx.shadowOffsetX = 0
         this.ctx.shadowOffsetY = 0
         this.ctx.shadowBlur = 2
         this.ctx.shadowColor = this.integration.infoStyle.strokeColor
       }
       this.ctx.fill()
       return { ...item, drawingPoint }
     })
   }

以上就基本完成 金字塔图的核心内容了。

但是还是不够， 想要达到Echarts的简单的功能，单单有图是不行的

文字的绘画

字体绘画就比较简单了， 我们拥有每一个数据的点的位置，把每个数据点的 F C 两个点的长度 除2 的点的位置设为起点就行了

使用canvas仿Echarts实现金字塔图的实例代码

 /**
    * @description: 绘画字体
    * 此方法请在 paintDataInfo() 执行后使用
    * @param {*}
    * @return {*}
    * @author: 舒冬冬
    */
   paintingText(lData) {
     this.ctx.shadowColor = 'rgba(90,90,90,0)'
     const color = this.integration.infoStyle.color ? this.integration.infoStyle.color : '#fff'
     const width = this.integration.infoStyle.width ? this.integration.infoStyle.width : 0
     const dotSize = this.integration.infoStyle.dotSize ? this.integration.infoStyle.dotSize : 4
     const offset = this.integration.infoStyle.offset ? this.integration.infoStyle.offset : [0, 0]
     let text = ''
     this.ctx.strokeStyle = color
     this.ctx.fillStyle = color
     this.dataInfo.forEach((item, index) => {
       if (item.drawingPoint) {
         let line = [
           [0, 0],
           [0, 0]
         ]
         this.ctx.font = `normal lighter ${
           this.integration.infoStyle.size ? this.integration.infoStyle.size : 14
         }px sans-serif `

         this.ctx.beginPath()
         if (lData && index + 1 === lData.l) {
           line = [
             [
               lData.obj.drawingPoint[2][0],
               (lData.obj.drawingPoint[2][1] - lData.obj.drawingPoint[5][1]) / 2 + lData.obj.drawingPoint[5][1]
             ],
             [
               lData.obj.drawingPoint[2][0] + lData.obj.drawingPoint[2][0] / 2 + width,
               (lData.obj.drawingPoint[2][1] - lData.obj.drawingPoint[5][1]) / 2 + lData.obj.drawingPoint[5][1]
             ]
           ]

           this.ctx.font = `normal lighter ${
             this.integration.infoStyle.size ? this.integration.infoStyle.size + 2 : 16
           }px sans-serif `
           text =
             this.integration.fontFormatter(item) !== 'default'
               ? this.integration.fontFormatter(item)
               : lData.obj.value + ' ---- ' + lData.obj.name
           this.ctx.setLineDash([0, 0])
           this.ctx.strokeText(
             text,
             line[1][0] + offset[0],
             line[1][1] + (this.integration.infoStyle.size ? this.integration.infoStyle.size + 2 : 14) / 3 + offset[1]
           )
         } else {
           line = [
             [
               item.drawingPoint[2][0],
               (item.drawingPoint[2][1] - item.drawingPoint[5][1]) / 2 + item.drawingPoint[5][1]
             ],
             [
               item.drawingPoint[2][0] + item.drawingPoint[2][0] / 2 + width,
               (item.drawingPoint[2][1] - item.drawingPoint[5][1]) / 2 + item.drawingPoint[5][1]
             ]
           ]
           text =
             this.integration.fontFormatter(item) !== 'default'
               ? this.integration.fontFormatter(item)
               : item.value + ' ----- ' + item.name
           this.ctx.setLineDash([0, 0])
           this.ctx.strokeText(
             text,
             line[1][0] + offset[0],
             line[1][1] + (this.integration.infoStyle.size ? this.integration.infoStyle.size + 2 : 16) / 3 + offset[1]
           )
         }
         this.ctx.setLineDash(this.integration.infoStyle.setLineDash)
         this.ctx.moveTo(...line[0])
         this.ctx.lineTo(...line[1])
         this.ctx.stroke()
         this.ctx.arc(...line[0], dotSize, 0, 360, false)
         this.ctx.fill() //画实心圆
       } else {
         throw '未找到 drawingPoint 属性'
       }
     })
   },

高亮图层

高亮图层无非就是监听鼠标移入位置，并且判断鼠标移入位置是否存在图层内，在哪个图层内，然后重新绘画当前图层

  /**
    * @description: 鼠标事件注册
    * @param {*}
    * @return {*}
    * @author: 舒冬冬
    */
   eventRegistered() {
     const canvasWarpper = document.getElementById('canvas-warpper')
     //注册事件
     canvasWarpper.addEventListener('mousedown', this.doMouseDown, false)
     canvasWarpper.addEventListener('mouseup', this.doMouseUp, false)
     canvasWarpper.addEventListener('mousemove', this.doMouseMove, false)
     // //注册事件
     // this.canvas.addEventListener('mousedown', this.doMouseDown, false)
     // this.canvas.addEventListener('mouseup', this.doMouseUp, false)
     // this.canvas.addEventListener('mousemove', this.doMouseMove, false)
   },
      /**
    * @description: 鼠标移动
    * @param {*} e
    * @return {*}
    * @author: 舒冬冬
    */
   // eslint-disable-next-line no-unused-vars
   doMouseMove(e) {
     const x = e.pageX
     const y = e.pageY
     this.highlightCurrentRegion(this.determineDataMouse(this.getLocation(x, y)))
     if (this.integration.tooltip.show) {
       this.showTooltip(this.determineDataMouse(this.getLocation(x, y)), this.getLocation(x, y))
     }
   },
 /**
    * @description: 判断鼠标在哪层位置上
    * @param {*}
    * @return {*}
    * @author: 舒冬冬
    */
   determineDataMouse(mouseLocation) {
     let req = false
     for (let index = 0; index < this.dataInfo.length; index++) {
       if (this.insidePolygon(this.dataInfo[index].drawingPoint, mouseLocation)) {
         return (req = { l: index + 1, obj: this.dataInfo[index] })
       }
     }
     return req
   },
 /**
    * @description: 高亮某一层级
    * @param {*} lData 层级数据
    * @return {*}
    * @author: 舒冬冬
    */
   highlightCurrentRegion(lData) {
     // const width = this.canvas.width;
     // this.canvas.width = width;

     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
     if (!lData) {
       this.paintDataInfo()
       this.ctx.shadowColor = 'rgba(90,90,90,0)'
       this.paintingBody()
       this.paintingText()
       return
     }
     this.paintDataInfo()
     this.ctx.shadowColor = 'rgba(90,90,90,0)'
     this.paintingBody()
     this.ctx.fillStyle = lData.obj.color
     //  this.ctx.scale(1.05, 1.05)
     this.ctx.beginPath()
     this.ctx.moveTo(lData.obj.drawingPoint[0][0], lData.obj.drawingPoint[0][1])
     this.ctx.lineTo(lData.obj.drawingPoint[1][0], lData.obj.drawingPoint[1][1])
     this.ctx.lineTo(lData.obj.drawingPoint[2][0], lData.obj.drawingPoint[2][1])
     this.ctx.lineTo(lData.obj.drawingPoint[3][0], lData.obj.drawingPoint[3][1])
     this.ctx.lineTo(lData.obj.drawingPoint[4][0], lData.obj.drawingPoint[4][1])
     this.ctx.lineTo(lData.obj.drawingPoint[5][0], lData.obj.drawingPoint[5][1])
     this.ctx.shadowOffsetX = 0
     this.ctx.shadowOffsetY = 0
     this.ctx.shadowBlur = 10
     this.ctx.shadowColor = this.integration.infoStyle.highlightedColor
     this.ctx.fill()
     // 阴影绘制
     this.ctx.beginPath()
     this.ctx.moveTo(lData.obj.drawingPoint[0][0], lData.obj.drawingPoint[0][1])
     this.ctx.lineTo(lData.obj.drawingPoint[1][0], lData.obj.drawingPoint[1][1])
     this.ctx.lineTo(lData.obj.drawingPoint[2][0], lData.obj.drawingPoint[2][1])
     this.ctx.lineTo(lData.obj.drawingPoint[5][0], lData.obj.drawingPoint[5][1])
     this.ctx.fillStyle = 'rgba(120,120,120,.15)'
     this.ctx.fill()
     this.paintingText(lData)
   }

显示tooltip位置

可以先定义 tooltip 的渲染模板

使用canvas仿Echarts实现金字塔图的实例代码

然后在代码上进行渲染

 showTooltip(lData, coordinates) {
     let canvasWarpper = document.getElementById('canvas-warpper')
     let canvasTooltip = document.getElementById('canvas-tooltip')
     if (lData) {
       canvasTooltip.style.zIndex = this.integration.tooltip.z
       canvasTooltip.style.transition =
         ' opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s,transform 0.15s'
       let html = JSON.parse(JSON.stringify(this.tooltipDiv))
       if (this.integration.tooltip.formatter) {
         html = this.integration.tooltip.formatter(lData)
       } else {
         const searchVal = [
           ['$[title]$', lData.obj.title],
           ['$[name]$', lData.obj.name],
           ['$[val]$', lData.obj.value],
           ['$[color]$', lData.obj.color],
           ['$[fontSize]$', this.integration.tooltip.fontSize],
           ['$[backgroundColor]$', this.integration.tooltip.backgroundColor],
           ['$[fontColor]$', this.integration.tooltip.fontColor]
         ]
         searchVal.forEach(el => {
           html = html.replaceAll(...el)
         })
       }
       canvasTooltip.innerHTML = html
       canvasWarpper.style.cursor = 'pointer'
       canvasTooltip.style.visibility = 'visible'
       canvasTooltip.style.opacity = 1
       let [x, y] = coordinates
       x = x + 20
       y = y + 20
       // 画布高度
       // canvasHeight: 0,
       // 画布宽度
       // canvasWidth: 0,
       // 判断是否超出框架内容
       if (x + canvasTooltip.clientWidth > this.canvasWidth) {
         x = x - canvasTooltip.clientWidth - 40
       }
       if (y + canvasTooltip.clientHeight > this.canvasHeight) {
         y = y - canvasTooltip.clientHeight - 40
       }
       canvasTooltip.style.transform = `translate3d(${x}px, ${y}px, 0px)`
     } else {
       canvasWarpper.style.cursor = 'default'
       canvasTooltip.style.visibility = 'hidden'
       canvasTooltip.style.opacity = 0
     }
   },

而一些其他的配置功能呢也是比较简单的操作了，主要是太懒了

最新文章 相关文章

如何通过HTML/CSS 实现各类进度条的功能

需求：我们在开发中会遇到使用各式各样的进度条，因为当前插件里面进度条各式各样的，为了方便我们定制化的开发和方便修改样式，我们这里使用HTML和CSS样式来进行开发进度条功能

2024-10-14 19:55:08

HTML5中使用Noto Sans CJK字体的详细步骤

在HTML5中使用Noto Sans CJK字体的详细指南 在网页设计中，字体选择对用户体验至关重要。Noto Sans CJK 是 Google 提供的一个优秀的免费字体系列，支持中文简体、繁体以及日文

2024-10-14 19:54:41

HTML5表单的自动验证、取消验证、自定义错误信息的操作

1、自动验证通过在元素中使用属性的方法，该属性可以实现在表单提交时执行自动验证的功能。下面是关于对元素内输入内容进行限制的属性的指定。 属性 说明 req

2024-10-14 19:54:32

HTML文本域如何设置为禁止用户手动拖动

在HTML中，文本域（textarea）通常允许用户通过拖拽其右下角来调整大小。然而，有时我们可能希望禁止这种手动拖动行为，以固定文本域的大小。要实现这一目标，可以使用CSS的resize属性

2024-10-14 19:54:20

Html去除a标签的默认样式的操作代码

Html去除a标签的默认样式,
a标签超链接字体默认蓝色带下划线;
去除可用:a{ text-decoration:none; color:inherit; cursor:auto;}测试代码<!DOCTYPE html><html la

2024-10-14 19:54:12

HTML、CSS和jQuery：构建一个漂亮的登录表单验证

HTML、CSS和jQuery：构建一个漂亮的登录表单验证在Web开发中，登录表单是一个常见的组件。用户在网站或应用程序中登录时，表单验证是确保安全性和准确性的重要步骤。本文将介绍如

2024-01-24 20:47:22

如何使用HTML和CSS实现一个固定侧边导航栏布局

导航栏是网页布局中非常重要的一部分，固定侧边导航栏布局是一种常见的设计模式。本文将介绍如何使用HTML和CSS来实现一个简单的固定侧边导航栏布局，并提供具体的代码示例。 HT

2024-01-24 20:47:05

如何在HTML中创建嵌套表格？

表格是网络开发的基本和关键方面，用于以有序且清晰的格式呈现信息。然而，在某些情况下可能需要呈现更复杂的数据，从而需要使用嵌套表。嵌套表是位于其他表格单元格内的表。在本

2023-09-09 22:34:31

在HTML中，如何设置拖放数据时是复制、移动还是链接？

使用 dropzone 属性设置是否复制、移动或链接拖动的数据。 复制 - 拖放将创建拖动元素的副本。 移动 - 拖动元素将移动到新位置。 链接 - 它创建指向拖动数据的链接尝试以下

2023-09-06 23:39:49

如何使用HTML5画布将DIV保存为带有扩展名的图像？

DIV 内容可以借助 JavaScript 中的 html2canvas() 函数保存为图像。 DIV 标签定义 HTML 文档中的一个部分。示例<div id = ”cpimg” style = ”padding:

2023-09-06 17:17:50

将HTML中的列数设置为跨度

我们在这篇文章中要执行的任务是在HTML中设置要跨越的列数。当使用<td>元素时，可以通过使用colspan属性来实现。因此，一个单独的表格单元格现在可以跨越多个列或宽度的单元格

2023-09-04 22:26:21

如何在HTML5中添加媒体播放器中使用的文本轨道？

使用 HTML5 中的 标签添加媒体播放器中使用的文本轨道。您可以尝试运行以下代码来了解如何添加 HTML5 媒体播放器中使用的文本轨道 -示例<!DOCTYPE HTML><html> <body>

2023-09-04 22:26:03

在HTML中设置有序列表的起始值？

使用start属性来设置HTML中有序列表的起始值，即：<ol start = " ">在上面添加您想要开始的位置的值。示例您可以尝试运行以下代码来实现start属性 -<!DOCTYPE html><html> <h

2023-09-04 22:23:45

html5手写签名的实现示例

前言业务中需要用户进行签字，如何让用户在手机端进行签字？
示例如下代码已分享至Gitee: https://gitee.com/lengcz/qianmingH5实现手写签字创建一个html页面<!DOCTYPE html><h

2023-07-31 21:51:05

html页面点击按钮实现页面跳转功能

html页面点击按钮实现页面跳转方法1、在button标签外嵌套一个a标签，利用超链接进行跳转；<a href="https://www.baidu.com/" target="_blank"> <button>进入baidu首页</button

2023-07-31 21:50:53

关于input type=&quot;file&quot;的及其files对象的深度解析

我们都知道，html5中有个input type=file元素。用该元素可以实现页面上传文件的功能但一般的做法只是简单的在表单中操作，我来研究一下深层东西想要了解它，就要知道它的内置对象

2023-07-31 21:50:44

HTML 列表中的dl,dt,dd,ul,li,ol区别及应用

平时有时候用到div和css对网站界面进行重构,经常会用到标签ul ol li dl dt dd ,这些标签常用于列表显示内容.
学会这几个标签的用途,了解一下他们的区别,对网站代码和加载速

2023-05-29 12:03:44

html+css实现div居中的8种方法

水平居中1.行级元素：为该行级元素的父元素设置text-align:center配合line-height样式<div style="width: 500px;height: 100px;line-height: 100px;border: 1px solid green;

2023-05-29 12:02:18

html5跟随鼠标炫酷动画欢迎页hovertreewelcome

html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页，文字效果渐变，鼠标跟随出绚丽的条纹。html5炫酷网站引导页，鼠标跟随出特效。在线演示效果图index.htm<!DOCTYPE ht

2023-05-29 12:02:10

谈谈HTML注释的语法和应用技巧

HTML是一种非常流行的网页编程语言，它可以让网页变得生动、多彩。在编写HTML代码时，注释起到了至关重要的作用。本文将介绍HTML注释的作用、语法和应用技巧，以指导读者正确地使

2023-04-21 14:35:08

如何使用HTML设置文本格式和样式

HTML是一种标记语言，它被用于在Web浏览器中显示各种文本。使用HTML可以添加各种格式和样式，如插图、链接和列表等。在本文中，我们将介绍如何使用HTML设置文本格式和样式。HTML

2023-04-13 20:51:24

html怎么跳转页面？技巧分享

HTML跳转是指从一个网页链接跳转到另一个网页的过程，也可以是同一个页面内部的跳转，比如从文章的顶部跳转到底部。下面我们一起来看一下HTML跳转的方法和技巧。一、超链接跳转

2023-04-13 20:51:01

html怎么设置图片背景？背景属性介绍

在网页设计中，有时候我们需要使用图片作为背景来美化网页。HTML提供了多种方法来设置图片背景，本文将介绍使用CSS的background属性来设置图片背景的方法。一、使用background-

2023-04-13 20:49:50

几种常见的HTML与PDF转换方法

HTML与PDF是两种常见的文档格式，HTML用于在web浏览器中呈现内容，而PDF用于打印和文档共享。有时我们需要将HTML转换成PDF或将PDF转换成HTML以适应不同的需求。本文将介绍几种

2023-04-13 20:48:38

如何学习修改JS和HTML

Javascript和HTML是网页开发中最基础的两种语言，学习它们，将为你成为一名优秀的网页开发者打下坚实的基础。在本文中，我们将讨论如何学习修改JS和HTML。一、学习HTMLHTML是一种

2023-04-13 20:47:29

HTML5之高度塌陷问题的解决

所谓的高度塌陷，意即当给子元素设置浮动时，其父元素高度会丢失的情况。通过实际代码进行演示：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta ht

2022-06-08 21:58:30

html5+实现plus.io进行拍照和图片等获取

html5+官网地址使用Hbuilder开发工具开发：实现可对Android机进行控制和获取资源
说明：IO模块管理本地文件系统，用于对文件系统的目录浏览、文件的读取、文件的写入等操作。通过

2022-06-08 21:57:06

HTML中实现音乐或视频自动播放案例详解

由于期末大作业我想插入一个背景音乐，实现点开网页就会自动播放音频的效果。于是我按照书上的案例写了如下代码<audio src="../medio/花海.mp3" loop="loop" controls="contr

2022-05-28 21:18:45

面试中canvas绘制图片模糊图片问题处理

问题：canvas绘制图片，图片变模糊设定一个一定尺寸的canvas，我这里设置的画布大小是400px*400px。当一张图片完全画到画布上的时候，大概率都会出现图片模糊的情况。
我拿下面一张

2022-05-10 21:40:46

使用feDisplacementMap+feImage滤镜实现水波纹效果(计算动态值)

该文章已经讲的特别细致了，该篇仅以此记录动效过程中各点的计算。1.feDisplacementMapfeDisplacementMap 实际上是一个位置替换滤镜，就是改变元素和图形的像素位置的。遍历原

2022-04-27 21:47:56

热点内容

网站制作favicon.ico最完美的方式
2020-04-15
html实现随机点名器的示例代码
2021-04-01
HTML中如何显示特殊字符(尖括号 “<”,">")？
2020-09-30
HTML/CSS实现逆序列表（列表编号倒序）
2020-09-30
HTML空（void）元素有哪些？
2019-11-10
自定义美化HTML5 video视频播放器界面样式
2018-08-26
html怎么设置文字向下
2021-02-25
html中隐藏A标签的文字并显示背景图片
2019-10-08
html怎么实现左右滑动导航栏
2020-08-25
html中onclick事件属性定义与用法
2019-10-04
返回顶部
顶部