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

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

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

<code><template>

<canvas ref="gauge"></canvas>code>

</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 的此图进行理解。

<code> // 绘制上层圆弧

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()

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

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