canvas 根据数据画饼图

<canvas width="600px" height="400px"></canvas>
<script>
    var myCanvas = document.querySelector("canvas");
    var ctx = myCanvas.getContext("2d");
    var data=[6,30,10,8];
    var total=0;
    var num=data.length;
    var canvasHeight=ctx.canvas.height;
    var canvasWidth=ctx.canvas.width;
    data.forEach(function(item,i){
        total+=item;
    });
    var dataList=[];
    for(var i=0;i<data.length;i++){
        var angle=Math.PI*2*data[i]/total;
        dataList.push(angle);
    }
    var start=0;
    var item2=0;
    var randomColor=function(){
        var r=Math.floor(Math.random()*256);
        var g=Math.floor(Math.random()*256);
        var b=Math.floor(Math.random()*256);
        return 'rgba('+r+','+g+','+b+')';
    };
    dataList.forEach(function(item,i){
        item2+=item;
        ctx.beginPath();
        ctx.moveTo(canvasWidth/2,canvasHeight/2);
        ctx.arc(canvasWidth/2,canvasHeight/2,150,start,item2);
        start=item2;
        ctx.fillStyle=randomColor();
        ctx.fill();
        ctx.stroke();
    });

</script>