canvas-绘制饼状图

话不多说，直接看代码：
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>饼状图</title>
  <style type="text/css">
  .wrap {
    text-align: center;
  }

  input {
    padding: 5px 6px;
    display: inline-block;
    vertical-align: middle;
  }

  button {
    padding: 6px 7px;
    display: inline-block;
    vertical-align: middle;
    border: 0;
  }

  .canvas {
    background: #fff;
    margin: 20px auto 0 auto;
  }
  </style>
</head>

<body>
  <div class="wrap">
    <input type="text" name="" id="text" placeholder="请输入数字，格式如：1,2,3" />
    <button type="button" id="btn">饼状图</button>
    <br />
    <canvas id="canvas" class="canvas" width="1000" height="500"></canvas>
  </div>
</body>
<script type="text/javascript">
;(function(win, doc, undefined) {
  "use strict"
  function Pie(inputId, btnId, canvasId) {
    this.oText = document.getElementById(inputId);
    this.oCanvas = document.getElementById(canvasId);
    this.oBtn = document.getElementById(btnId);
    this.height = this.oCanvas.clientHeight;
    this.width = this.oCanvas.clientWidth;
    this.content = this.oCanvas.getContext("2d");
    //自动初始化
    this.init(); 
  }
  Pie.prototype = {
    //强制指向
    constructor: Pie,
    getcolor() {
      let colorValue = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
      let colorArray = colorValue.split(",");
      let color = "#";
      for (let i = 0; i < 6; i++) {
        color += colorArray[Math.floor(Math.random() * 16)];
      }
      return color;
    },
    splitstr() {
      //这是输入的字符串
      let data = new Array();
      let sum = 0;
      let str = this.oText.value.toString();
      if (str === '') {
        alert("输入不能为空");
        return false
      }
      let strs = str.split(",")
      for (let i = 0; i < strs.length; i++) {
        if (strs[i] === '' || strs[i] === '0') {
          alert("数据中不能存在空或者值为零");
          return false
        } else if (isNaN(strs[i])) {
          alert("数据格式不正确");
          return false
        } else {
          data[i] = parseFloat(strs[i]);
        }
      }
      for (let i = 0; i < data.length; i++) {
        sum = sum + data[i];
      }
      for (let i = 0; i < data.length; i++) {
        data[i] = data[i] / sum;
      }
      return data;
    },
    draw() {
      let data = this.splitstr();
      if (data) {
        let startPoint = 1.5 * Math.PI;
        let halfWidth = parseInt(this.width) / 2;
        let halfHeight = parseInt(this.height) / 2;
        let partHeight = parseInt(this.height) / 4;
        for (let i = 0; i < data.length; i++) {
          this.content.lineWidth = 2;
          //填充颜色
          this.content.fillStyle = this.getcolor();
          this.content.strokeStyle = "white";
          //开始
          this.content.beginPath();
          //移动到中心
          this.content.moveTo(halfWidth, halfHeight);
          this.content.arc(halfWidth, halfHeight, partHeight, startPoint, startPoint - Math.PI * 2 * data[i], true);
          this.content.fill();
          this.content.stroke();
          this.content.closePath();
          startPoint -= Math.PI * 2 * data[i];
        }
        this.oCanvas.style.background = "#eee";
        this.oText.value = '';
      } else {
        this.oCanvas.style.background = "#fff";
        this.content.clearRect(0, 0, 1000, 500)
        this.oText.value = '';
        return false
      }
    },
    init() {
      this.oBtn.addEventListener("click", () => {
        this.draw();
      })
    }
  }
  win.Pie = Pie;
}(window, document))
</script>
<script type="text/javascript">
window.onload = function() {
  new Pie("text", "btn", "canvas");
}
</script>

</html>
　　效果图：