canvas Five 饼图

作者: 尤樊容 | 来源:发表于2017-04-12 11:12 被阅读26次

canvas Five 饼图
canvas饼图
Canvas 饼图与动效
SVG绘制环图
canvas绘制饼图
浅析HTML5的Canvas——案例绘制
canvas图表(3) - 饼图
微信小程序图表插件（wx-charts）
canvas-饼状图
Android Canvas绘制饼图

前面几节的链接：http://www.jianshu.com/u/ab8f021be9ee
需要大家的支持，接着canvas画饼图，有图有代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0;padding:0;}
        html,body{
            height: 100%;
            overflow: hidden;
        }
        body{
            background: #000;
        }
        #c1{
            background: #fff;
        }
    </style>
    <script>
        function d2a(n){
            return n*Math.PI/180;
        }
        function rnd(m,n){
            return parseInt(m+Math.random()*(n-m));
        }
        document.addEventListener('DOMContentLoaded',function(){
            var oC = document.getElementById('c1');
            var gd = oC.getContext('2d');
            var cx = 200;
            var cy = 200;
            var r = 100;
            var arr = [98,80,65,34,12];
            var sum = 0;
            //求和
            for(var i = 0;i<arr.length;i++){
                sum+=arr[i];
            }
            //算比例
            var aDeg = [];
            for(var i = 0;i<arr.length;i++) {
                aDeg[i] = arr[i]/sum*360;
            }
            //画每一部分
            var d = 0;
            for(var i = 0;i<aDeg.length;i++){
                drawPie(d,d+aDeg[i]);//aDeg 0
                d+=aDeg[i];
            }
            function drawPie(start,end){
                gd.beginPath();
                gd.fillStyle ='rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')';
                gd.moveTo(cx,cy);
                gd.arc(cx,cy,r,d2a(start),d2a(end),false);
                gd.closePath();
                gd.fill();
            }
        },false);
    </script>
</head>
<body>
<canvas id="c1" width="800" height="600"></canvas>
</body>
</html>

效果图：

Paste_Image.png