canvas绘制图表（一）

摘要：图表是数据表示的一种直观的形式，前端开发经常回合图表打交道，一般都会借用第三方的库，如等，但如果只是很简单的图标，我们完全可以自己绘制，现在我们来绘制一个简单的百分比展示图表最终效果如下代码额，很简单，随便放在某个地方绘制一个圆弧注意点一些

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

额，很简单，随便放在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()