摘要：圖表是數(shù)據(jù)表示的一種直觀的形式，前端開發(fā)經(jīng)常回合圖表打交道，一般都會借用第三方的庫，如等，但如果只是很簡單的圖標(biāo)，我們完全可以自己繪制，現(xiàn)在我們來繪制一個簡單的百分比展示圖表最終效果如下代碼額，很簡單，隨便放在某個地方繪制一個圓弧注意點一些

圖表是數(shù)據(jù)表示的一種直觀的形式，前端開發(fā)經(jīng)常回合圖表打交道，一般都會借用第三方的js庫，如echats、bizchats等，
但如果只是很簡單的圖標(biāo)，我們完全可以自己繪制，現(xiàn)在我們來繪制一個簡單的百分比展示圖表

額，很簡單，隨便放在html某個地方

1.一些如寬度，半徑的數(shù)據(jù)盡量做成可配置的，我先配置如下4個屬性

let config = {
    width: 300,     //畫布的寬
    height: 300,    //畫布的高
    radius: 100,    //圓弧半徑
    lineWidth: 30,  //圓弧線條寬度
    bgBase: "#000", //未填充背景色
    bgFill: "red", //填充背景色
    data: 1         //數(shù)據(jù)，百分比，20%應(yīng)寫成0.2
}

2.最終圓弧的兩端要是圓的
ctx.lineCap = "round"

3.圓弧起始盡量從0開始，便于計算

4.從0開始的圓弧需要位移旋轉(zhuǎn)等操作，注意canvas的位移旋轉(zhuǎn)需要在繪制圖形前設(shè)置

let config = {
    width: 300,     //畫布的寬
    height: 300,    //畫布的高
    radius: 100,    //圓弧半徑
    lineWidth: 30,  //圓弧線條寬度
    bgBase: "#000", //未填充背景色
    bgFill: "red", //填充背景色
    data: 0.5         //數(shù)據(jù)，百分比，20%應(yīng)寫成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()

注意設(shè)置字體大小時后要跟字體名，否則會無效，如：
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()