[关闭]
@MickeyWang 2018-06-12T14:57:10.000000Z 字数 1458 阅读 391

settimeoutCode

  1. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>canvas绘制饼图</title>
  6.     <script>
  7.     /**
  8.      * 绘制饼图
  9.      * @param  {array} data_arr  扇形比例的数组
  10.      * @param  {array} color_arr 每个扇形的颜色数组
  11.      */
  12.     function drawCircle(data_arr, color_arr) {
  13.         var canvas = document.getElementById('canvas_circle');
  14.         var ctx = canvas.getContext('2d');
  15.         var radius = canvas.height / 2 - 20; //半径
  16.         var ox = radius + 20,
  17.             oy = radius + 20; //圆心
  18.         var startAngle = 0; //起始弧度
  19.         var endAngle = 0; //结束弧度
  20.         var color = '';
  22.         var time = 200; //毫秒数
  23.         var endTemp = '';
  24.         var angleStep = '';
  26.         for (var i = 0; i < data_arr.length; i++) {
  27.             //第一个扇形的起始角度
  28.             i == 0 ? startAngle = 0 : "";
  29.             //准备画扇形的数据
  30.             endAngle = startAngle + data_arr[i] * Math.PI * 2; //结束弧度
  31.             angleStep = (data_arr[i] * Math.PI * 2) / time; //画扇形时的增长步长
  32.             color = color_arr[i];
  33.             //开始画扇形
  34.             myLoop(startAngle, endAngle, ctx, angleStep, ox, oy, radius, color);
  35.             startAngle = endAngle;
  36.         }
  37.     }
  39.     /**
  40.      * 通过setInterval画圆
  41.      */
  42.     function myLoop(startAngle, endAngle, ctx, angleStep, ox, oy, radius, color) {
  43.         var endTemp = startAngle; //画扇形时的动态增长的角度
  44.         var timer = setInterval(function() {
  45.             if (endTemp >= endAngle) {
  46.                 clearInterval(timer);
  47.                 return;
  48.             }
  49.             ctx.fillStyle = color;
  50.             endTemp += angleStep; //使临时结束弧度递增
  51.             ctx.beginPath();
  52.             ctx.moveTo(ox, oy); //曲线起点设置为圆心
  53.             ctx.arc(ox, oy, radius, startAngle, endTemp, false);
  54.             ctx.closePath();
  55.             ctx.fill();
  56.         }, 1);
  57.     }
  59.     /**
  60.      * 入口初始方法
  61.      */
  62.     function init() {
  63.         //扇形比例数据和颜色
  64.         var data_arr = [0.3, 0.4, 0.2, 0.1];
  65.         var color_arr = ["#FF7F00", "#00FFFF", "#FFFF00", "#996633"];
  67.         drawCircle(data_arr, color_arr);
  68.     }
  70.     window.onload = init;
  71.     </script>
  72. </head>
  74. <body>
  75.     <h3>canvas绘制饼图</h3>
  76.     <p>
  77.         <canvas id="canvas_circle" width="500px" height="300px" style="border:2px solid #FF7F00">
  78.             您的浏览器不支持canvas
  79.         </canvas>
  80.     </p>
  81. </body>
  83. </html>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注