zoukankan      html  css  js  c++  java
  • canvas绘制扇形统计图

    今天偷懒了,把上次的作业代码记录在这里好了。

    绘制简单的扇形统计图需要用到JS插件,绘制完以后的代码是这样的:

    今天有点晚了把代码记录一下:

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.12.2.js"></script>
    <style>
    *{ margin:0px; padding:0px;}
    body{ text-align:center}
    #can1{ 400px; height:400px;}
    </style>
    </head>
    <body>
    <div style="400px; height:400px; margin:10px auto;">
    <canvas id="can1" width="400" height="400"></canvas>
    </div>
    <script>
    $(function(){
    var canv=document.getElementById("can1");
    var ctx=canv.getContext("2d");
    var num=[300,300,300];
    var col=["#F00","#00f","#060"]
    var j=0,j1=0,j2=0,jiao=0;
    var sun=0;
    for(var i=0;i<num.length;i++){
    sun=sun+num[i];
    }
    for(var i=0;i<num.length;i++){
    j=2*Math.PI*num[i]/sun;
    j2=j1+j;
    ctx.beginPath();
    ctx.fillStyle=col[i];
    ctx.arc(canv.width/2,canv.height/2,120,j1,j2,false);
    ctx.lineTo(canv.width/2,canv.height/2);

    ctx.closePath();

    ctx.fill();
    jiao=j1+j/2;
    ctx.font="20px Arial";
    ctx.fillStyle="#000";
    j1=j1+j;
    }

    })
    </script>

    </body>
    </html>

    好了,这个就是上面图形的代码,但是要加JS哦!

  • 相关阅读:
    第05组 Beta版本演示
    第05组 Beta冲刺(4/4)
    第05组 Beta冲刺(3/4)
    第05组 Beta冲刺(2/4)
    第05组 Beta冲刺(1/4)
    第05组 Alpha事后诸葛亮
    第05组 Alpha冲刺(4/4)
    第05组 Alpha冲刺(3/4)
    第05组 Alpha冲刺(2/4)
    300iq Contest 3 C. Cells Blocking
  • 原文地址:https://www.cnblogs.com/kulowreidyql/p/5727415.html
Copyright © 2011-2022 走看看