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