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

最新推荐文章于 2022-05-25 15:49:40 发布

zzz19

最新推荐文章于 2022-05-25 15:49:40 发布

阅读量299

点赞数

文章标签： canvas

原文链接：https://www.mk2048.com/blog/blog.php?id=0bkhjj1kj&title=%E5%88%A9%E7%94%A8canvas%E8%BF%9B%E8%A1%8C%E4%B8%80%E4%B8%AA%E9%A5%BC%E5%BD%A2%E5%9B%BE%E7%9A%84%E7%BB%98%E5%88%B6

版权

<!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>