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


    <!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>
  • 相关阅读:
    rwkj 1337
    poj 1002
    map
    vector
    sort排序
    sort函数
    poj 2945
    poj2388
    rwkj 1422搜索(素数环)
    poj2503
  • 原文地址:https://www.cnblogs.com/199316xu/p/6426385.html
Copyright © 2020-2023  润新知