html js清除画布文字,利用canvas的fillText属性绘制文字并实现居中和清空画布

利用 canvas 画一个圆环，然后再里面绘制文字，实现居中显示。

首先写一个 canvas 容器：

JS部分：

其实上半部分是绘制圆环，最后 8 行才是文字部分，可以设置字体样式、颜色、是否居中等。function modelvisitNumber() {

let a = 7

let num = 925

var c = document.getElementById('myCanvas')

// 改变宽度清空画布

c.width = c.width

var ogc = c.getContext('2d') //返回一个用于在画布上绘图的环境

ogc.beginPath() //开始一条路径 背景

ogc.arc(40, 40, 35, 0, 2 * Math.PI) // 画圆(x坐标,y坐标,半径,起点(3点钟为0PI))，

ogc.strokeStyle = 'rgb(69, 174, 234)' //路径的样式

ogc.lineWidth = 10 //线的宽度

ogc.stroke() //使用 stroke() 方法在画布上绘制确切的路径。

var ctx = c.getContext('2d')

ctx.beginPath() //高亮环路径

ctx.arc(40, 40, 35, -Math.PI / 2, (a * 3.6 - 90) * Math.PI / 180)

ctx.strokeStyle = 'rgb(190, 227, 247)'

ctx.lineWidth = 10

ctx.lineCap = 'butt' //线的端点：butt平直 round圆 square方

// 设置文字居中但是fillText的第二个参数必须为画布宽度一半

ctx.textAlign = 'center' //文字居中

ctx.font = 'bold 16px Arial' //文字样式：加粗 16像素 字体Arial

ctx.fillStyle = '#F09000' //字体颜色

ctx.fillText(a + '%', 40, 35) //fillText里面的可填写的值(文本内容, x坐标, y坐标, 文本最大宽度)

ctx.font = '14px Arial'

ctx.fillStyle = '#FF9000'

ctx.fillText(num + '次', 40, 50)

ctx.stroke()

}

//调用

modelvisitNumber()