• 利用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>
  • 相关阅读:
    用Web标准进行开发[转]
    下载文件时不要全部读入内存(C#)
    ManyToMany
    笔试题:十三 三次 与众不同的那个
    Hibernate<Session>与Jdbc<Connection>
    一个Hibernate程序的配置过程
    Hibernate 配置多个数据库 多个SessionFactory
    Tomcat5.5配置多域名绑定和虚拟目录
    Spring加载配置文件的3种方法
    Java IO流
  • 原文地址:https://www.cnblogs.com/199316xu/p/6426385.html
Copyright © 2020-2023  润新知