canvas画饼状图

用HTML5的canvas画一个饼状图，开始吧！
第一步：设置画布的宽高

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
//设置画布的宽高
canvas.width = 831;
canvas.height = 706;

第二步：变换坐标原点到画布中心

function translate(context) {
  context.translate(canvas.width / 2, canvas.height / 2)
}

第三步：绘制扇形

// 准备数据
const data = [
  { value: 1048, name: '搜索引擎' },
  { value: 735, name: '直接访问' },
  { value: 580, name: '邮件营销' },
  { value: 484, name: '联盟广告' },
  { value: 300, name: '视频广告' }
]
// 计算比例
function dataProcess(data) {
  let total = 0
  for (const item of data) {
    total += item.value
  }
  for (const item of data) {
    item.percent = item.value / total
  }
}
dataProcess(data)
// 定义颜色
const colors = ['#e6a0c4', '#c6cdf7', '#d8a499', '#7294d4', '#fdc765']
// 半径
const r = 300
// 开始绘制
function drawFan(context) {
  const startAngle = -0.5 * Math.PI
  context.save()
  for (let i = 0; i < data.length; i++) {
    const item = data[i]
    context.beginPath()
    context.moveTo(0, 0)
    context.lineTo(0, -r)
    const endAngle = item.percent * 2 * Math.PI + startAngle
    context.arc(0, 0, r, startAngle, endAngle, false)
    context.closePath()
    context.fillStyle = colors[i]
    context.fill()
    // 旋转坐标系，计算更方便
    context.rotate(item.percent * 2 * Math.PI)
  }
  context.restore()
}

第四步：绘制文本

function drawText(context) {
  context.font = "14px sans-serif";
  context.fillStyle = "#fff"
  const a = 180
  let angle = 0
  for (const item of data) {
    const thita = (angle * 2 + item.percent) * Math.PI
    const x = a * Math.sin(thita)
    const y = -a * Math.cos(thita)
    const textWidth = context.measureText(item.name)
    context.fillText(item.name, x - textWidth.width / 2, y)
    angle += item.percent
  }
}

到此就画完啦，如图：

总结：坐标变换带来极大的便利，不过变换之前记得context.save()保存Canvas的状态，操作完毕之后记得context.restore()恢复到之前的状态哦。