canvas绘制图表（一）

图表是数据表示的一种直观的形式，前端开发经常回合图表打交道，一般都会借用第三方的js库，如echats、bizchats等，
但如果只是很简单的图标，我们完全可以自己绘制，现在我们来绘制一个简单的百分比展示图表

最终效果如下

html代码

<canvas id="canvas"></canvas>

额，很简单，随便放在html某个地方

绘制一个圆弧

注意点

1.一些如宽度，半径的数据尽量做成可配置的，我先配置如下4个属性

let config = {
    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开始的圆弧需要位移旋转等操作，注意canvas的位移旋转需要在绘制图形前设置

效果

代码

let config = {
    width: 300,     //画布的宽
    height: 300,    //画布的高
    radius: 100,    //圆弧半径
    lineWidth: 30,  //圆弧线条宽度
    bgBase: '#000', //未填充背景色
    bgFill: 'red', //填充背景色
    data: 0.5         //数据，百分比，20%应写成0.2
}

let canvas =  document.getElementById('canvas')
canvas.width = config.width
canvas.height = config.height

let ctx = canvas.getContext('2d')

ctx.save()
ctx.beginPath()
ctx.translate(config.width/2,config.height/2);
ctx.rotate(0.6*Math.PI)
ctx.lineWidth = config.lineWidth
ctx.lineCap = 'round'
ctx.strokeStyle = config.bgBase
ctx.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.bgFill
ctx.stroke()
ctx.restore()

绘制百分比数值

注意设置字体大小时后要跟字体名，否则会无效，如：
ctx.font = "30px Arial"

代码

ctx.save()
ctx.beginPath()
ctx.font = "30px Arial"
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
ctx.fillText(config.data*100 + '%',config.width/2,config.height/2)
ctx.restore()