图表是一种直观的数据表示形式。前端开发经常和图表打交道，一般会借用第三方的js库，比如echats、bizchats等，但是如果只是一个很简单的图标，我们可以自己画。现在让我们绘制一个简单的百分比显示图表。最终效果如下。html代码非常简单。只需将它放在html中的某个位置并绘制弧线即可。注意事项1.一些比如width和radius的数据要尽可能的可配置。我先配置以下4个属性。letconfig={width:300,//画布宽度height:300,//画布高度radius:100,//圆弧半径lineWidth:30,//圆弧线宽bgBase:'#000',//未填充背景色bgFill:'red',//填充背景色data:1//数据，百分比，20%应该写成0.2}2.最后的圆弧如果圆的两端都是ctx.lineCap='round'3.圆弧尽量从0开始，容易计算。4、从0开始的圆弧需要进行位移、旋转等操作。注意在绘制图形之前需要先绘制画布的位移和旋转。设置效果代码letconfig={width:300,//canvaswidthheight:300,//canvasheightradius:100,//arcradiuslineWidth:30,//arclinewidthbgBase:'#000',//未填充背景色bgFill:'red',//填充背景色data:0.5//数据，百分比，20%应该写成0.2}letcanvas=document.getElementById('canvas')canvas.width=config.widthcanvas.height=config.heightletctx=canvas.getContext('2d')ctx.save()ctx.beginPath()ctx.translate(config.width/2,config.height/2);ctx.rotate(0.6*Math.PI)ctx.lineWidth=config.lineWidthctx.lineCap='round'ctx.strokeStyle=config.bgBasectx.arc(0,0,config.radius,0,1.8*Math.PI)ctx.stroke()ctx.beginPath()ctx.arc(0,0,config.radius,0,1.8*Math.PI*config.data)ctx.strokeStyle=config.bgFillctx.stroke()ctx.restore()绘制百分比值注意设置字体大小时，后面必须跟字体名，否则无效，如：ctx.font="30pxArial"codectx.save()ctx.beginPath()ctx.font="30px宋体"ctx.textAlign='center'ctx.textBaseline='middle'ctx.fillText(config.data*100+'%',config.width/2,config.height/2)ctx.restore()
