canvas绘制仪表盘/刻度盘

canvas画布可以实现在网页上绘制图形的方法，比如图表、图片处理、动画、游戏等。今天我们在vue模板下用canvas实现仪表盘的绘制。

对canvas不熟悉的同学可以先了解下canvas的API文档：canvas API中文网 - Canvas API中文文档首页地图

一、创建模板，创建canvas标签

<template>  <canvas ref="gauge"></canvas></template><script>export default {  name: 'Gauge',  data() {    return {      width:220,    // 画布的宽度      height:220,   // 画布的高度      progress:0.6  // 值-进度    }  },  mounted(){    this.draw()  },  methods:{    draw(){}  },}</script>

二、初始化画布，并绘制背景圆弧

    draw(){      // 获取canvas元素和上下文      let canvas = this.$refs.gauge      let ctx = canvas.getContext("2d")      // 获取设备像素比，解决移动端显示锯齿、模糊等问题      const dpr = window.devicePixelRatio || 1      canvas.style.width = this.width + "px"      canvas.style.height = this.height + "px"      canvas.height = this.height * dpr      canvas.width = this.width * dpr      ctx.scale(dpr, dpr)      // 清除画布--更新画布前需要清除之前的画布内容      ctx.clearRect(0, 0, canvas.width, canvas.height)      // 圆心位置-宽高的一半      const centerX = this.width / 2      const centerY = this.height / 2      const startAngle = (3 * Math.PI) / 4   // 仪表盘的初始角度      const endAngle = Math.PI / 4           // 仪表盘的结束角度      const totalAngle = (3 * Math.PI) / 2   // 仪表盘的总角度      // 绘制背景圆弧      ctx.beginPath()      ctx.arc(centerX, centerY, (this.width-20)/2, startAngle, endAngle)      ctx.lineWidth = 16      ctx.lineCap = 'round'      ctx.strokeStyle = '#FAFAFA '      ctx.stroke()    }

详解：

1、仪表盘的初始角度、结束角度、总角度根据你需要的弧形进行配置。

可以参照arc api 的此图进行理解。

2、lineCap：设置或返回线条的结束端点样式；

三、绘制上层圆弧

      // 绘制上层圆弧      const endAngle1 = startAngle + (totalAngle * this.progress)      ctx.save()      ctx.beginPath()      ctx.arc(centerX, centerY, (this.width-20)/2, startAngle, endAngle1)      ctx.lineWidth = 16      ctx.lineCap = 'round'      var gradient = ctx.createLinearGradient(0, this.height/2*Math.sqrt(2), this.width/2*Math.sqrt(2), 0);      gradient.addColorStop(0, '#DDF5EC');      gradient.addColorStop(1, '#04FACF');      ctx.strokeStyle = gradient      ctx.stroke()

详解：

1、颜色设置渐变，渐变色x轴、y轴的起点和终点。根据勾股定理计算为半径的平方根。

四、绘制刻度、刻度值

      // 绘制刻度      ctx.save()      // 将原点移到圆心处      ctx.translate(centerX, centerY)      const numTicks = 100 // 刻度数量      let tickLength = 0  // 刻度长度      let tickWidth = 0 // 刻度宽度      const scaleRadius = (this.width-50)/2   // 刻度半径      let angleStep = totalAngle / numTicks      for (let i = 0; i <= numTicks; i++) {        let angle = startAngle + (i * angleStep)        if (i % 10 == 0) {          tickWidth = 1*2   // 长刻度线的宽是小刻度的2倍          tickLength = 6*1.5   // 长刻度线的长是小刻度的1.5倍        } else {          tickWidth = 1          tickLength = 6        }        ctx.beginPath();        ctx.lineWidth = tickWidth        ctx.strokeStyle = '#cccccc'        // 计算刻度起点和终点的坐标        let startX = (scaleRadius - tickLength) * Math.cos(angle)        let startY = (scaleRadius - tickLength) * Math.sin(angle)        let endX = (scaleRadius) * Math.cos(angle)        let endY = (scaleRadius) * Math.sin(angle)        // 绘制刻度线段        ctx.moveTo(startX, startY)        ctx.lineTo(endX, endY)        ctx.stroke()        // 绘制刻度值文本        let text = i % 10 == 0 ? i : ''        let textX = (scaleRadius - 20) * Math.cos(angle)        let textY = (scaleRadius - 20) * Math.sin(angle)        ctx.font = "12px Arial"        ctx.fillStyle = '#666666'        ctx.textAlign = "center"        ctx.textBaseline = "middle"        ctx.fillText(text, textX, textY)              }      ctx.restore()

五、绘制指针

      // 绘制指针      const angle = startAngle + (totalAngle * this.progress)      let endX = (scaleRadius - 30) * Math.cos(angle)      let endY = (scaleRadius - 30) * Math.sin(angle)      ctx.save()      ctx.translate(centerX, centerY)  // 将原点移到圆心处      ctx.beginPath()            ctx.moveTo(0, 0)      ctx.lineTo(endX,endY)      ctx.lineWidth = 3      ctx.strokeStyle = '#F8E71C'      ctx.stroke()      ctx.restore()

六、绘制中心点

      // 绘制中心点      ctx.save()      ctx.beginPath()      ctx.arc(centerX, centerY, 4, 0, 2*Math.PI)      ctx.fillStyle = "#666666"      ctx.fill()      ctx.restore()

如有疑问，欢迎留言交流；

如有定制需求，欢迎私信沟通~