利用 canvas 画一个圆环，然后再里面绘制文字，实现居中显示。
首先写一个 canvas 容器：
JS部分：
其实上半部分是绘制圆环，最后 8 行才是文字部分，可以设置字体样式、颜色、是否居中等。functionmodelvisitNumber(){
leta=7
letnum=925
varc=document.getElementById('myCanvas')
//改变宽度清空画布
c.width=c.width
varogc=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()方法在画布上绘制确切的路径。
varctx=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='bold16pxArial'//文字样式：加粗16像素字体Arial
ctx.fillStyle='#F09000'//字体颜色
ctx.fillText(a+'%',40,35)//fillText里面的可填写的值(文本内容,x坐标,y坐标,文本最大宽度)
ctx.font='14pxArial'
ctx.fillStyle='#FF9000'
ctx.fillText(num+'次',40,50)
ctx.stroke()
}
//调用
modelvisitNumber()
