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.gaugelet ctx = canvas.getContext("2d")// 获取设备像素比，解决移动端显示锯齿、模糊等问题const dpr = window.devicePixelRatio || 1canvas.style.width = this.width + "px"canvas.style.height = this.height + "px"canvas.height = this.height * dprcanvas.width = this.width * dprctx.scale(dpr, dpr)// 清除画布--更新画布前需要清除之前的画布内容ctx.clearRect(0, 0, canvas.width, canvas.height)// 圆心位置-宽高的一半const centerX = this.width / 2const centerY = this.height / 2const 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 = 16ctx.lineCap = 'round'ctx.strokeStyle = '#FAFAFA 'ctx.stroke()}

详解：

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

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

角度

180

270

360

初始角度

1 * Math.PI

(3 * Math.PI) / 4

0.5 * Math.PI

结束角度

0

Math.PI / 4

-0.5 * Math.PI

总角度

1 * Math.PI

(3 * Math.PI) / 2

2 * Math.PI

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

butt

默认。向线条的每个末端添加平直的边缘。

round

向线条的每个末端添加圆形线帽。

square

向线条的每个末端添加正方形线帽。

三、绘制上层圆弧

      // 绘制上层圆弧const endAngle1 = startAngle + (totalAngle * this.progress)ctx.save()ctx.beginPath()ctx.arc(centerX, centerY, (this.width-20)/2, startAngle, endAngle1)ctx.lineWidth = 16ctx.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 = gradientctx.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 / numTicksfor (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 = 1tickLength = 6}ctx.beginPath();ctx.lineWidth = tickWidthctx.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 = 3ctx.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()

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

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