首页 > > 网页制作 > css >

利用canvas进行一个饼形图的绘制

2018-06-24 00:59:34来源：未知阅读 ()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制饼形图。</title>
    <style>
        canvas{
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <!-- 绘制饼形图 -->
    <canvas width="500" height="500" id="canvas"></canvas>
</body>
<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    function toAngle(radian){
        return radian*180/Math.PI;
    }
    function toRadian(angle){
        return angle*Math.PI/180;
    }
    /*将饼状图画出来*/
    var colors = 'green,yellow,pink,blue,red,lightgreen,lightblue'.split(',');
    var text = 'HTML5,Canvas,Javascript,Css3,Ajax,框架封装,jQuery与移动Web'.split(',');
    var x0 = canvas.width/2,
        y0 = canvas.height/2,
        radius = 100,
        start = -5,
        distance = 20,
        padding = 5,
        step = 360/colors.length;
    for(var i = 0 ; i < colors.length ; i ++){
        ctx.beginPath();
        ctx.fillStyle = colors[i];
        ctx.moveTo(x0,y0);
        ctx.arc(x0,y0,radius,toRadian(start),toRadian(start+=step));
        ctx.fill();
        /*画斜线*/
        ctx.beginPath();
        ctx.strokeStyle = colors[i];
        var x1 = x0 + (radius+distance)*Math.cos(toRadian(( start-step/2 ))),
            y1 = y0 + (radius+distance)*Math.sin(toRadian(( start-step/2 )));
        ctx.moveTo(x0,y0);
        ctx.lineTo(x1,y1);
        ctx.stroke();
        /*写文字*/
        ctx.beginPath();
        ctx.fillStyle = colors[i];
        var textX = x1,
            textY = y1;
        if(start-step/2 > 90 && start-step/2 < 270){
            ctx.textAlign = 'right';
            textX = textX - padding;
        }else{
            ctx.textAlign = 'left';
            textX = textX + padding;
        }
        ctx.fillText(text[i],textX,textY-padding/2);
        /*画直线*/
        ctx.beginPath();
        ctx.moveTo(x1,y1);
        //计算文字的宽度
        var length = ctx.measureText( text[ i ] ).width
        if(start-step/2 > 90 && start-step/2 < 270){
            x1 += -2*padding-length;
        }else{
            x1 += 2*padding + length;
        }
        ctx.lineTo(x1,y1);
        ctx.stroke();
        /*画饼形图*/
        /*ctx.beginPath();
        ctx.fillStyle = colors[i];
        ctx.moveTo(x0,y0);
        ctx.arc(x0,y0,radius,toRadian(start),toRadian(start+=step));
        ctx.fill();*/
    }
</script>
</html>