利用js canvas画一个雷达分布饼图

//把背景元素先画出来
function drawing(){
   var c = document.getElementById("myCanvas");
   var ctx = c.getContext("2d");


   //黑夜扇形
   ctx.beginPath();  //这个开始和结束可以让这个圆独立起来
   ctx.fillStyle = "#999999"//填充验收
   ctx.moveTo( 170, 150 );//有这个设置就可以是扇形
   ctx.arc(170, 150, 100, Math.PI * 10 / 12, Math.PI * 19 / 12)//x轴，y轴，半径，起始弧度，结束弧度
   ctx.closePath();
   ctx.fill();

   //白昼扇形
   ctx.beginPath();  //这个开始和结束可以让这个圆独立起来   相当于div一样
   ctx.fillStyle = "#b8dcdc"//填充验收
   ctx.moveTo( 170, 150 );//有这个设置就可以是扇形
   ctx.arc(170, 150, 100, Math.PI * 19 / 12, Math.PI * 10 / 12 )
   ctx.closePath();
   ctx.fill();

   //画线06:00
   ctx.beginPath();
   ctx.strokeStyle="#ffffff";
   ctx.moveTo(170,50);//06:00-18:00
   ctx.lineTo(170,250);
   ctx.moveTo(70,150);//00:00-12:00
   ctx.lineTo(270,150);


   var x45du = Math.sin(Math.PI * 0.25)*100;//45狐度的正弦值和余弦值
   ctx.moveTo(170+x45du,150-x45du);//09:00-21:00
   ctx.lineTo(170-x45du,150+x45du);
   ctx.moveTo(170-x45du,150-x45du);//03:00-15:00
   ctx.lineTo(170+x45du,150+x45du);

   ctx.moveTo(170,150);
   ctx.lineTo(170+Math.cos(Math.PI * 5 / 12)*100,150-Math.sin(Math.PI * 5 / 12)*100);//07:00
   ctx.moveTo(170,150);
   ctx.lineTo(170-Math.cos(Math.PI * 2 / 12)*100,150+Math.sin(Math.PI * 2 / 12)*100);//22:00

   ctx.stroke();
   ctx.closePath();


   //写字
   ctx.beginPath();
   ctx.fillStyle="#000";
   ctx.font="small-caps bold 16px arial";
   ctx.fillText("24H血压分布",15,30);
   ctx.font="12px Arial";
   ctx.fillText("06:00",155,40);
   ctx.fillText("07:00",190,45);
   ctx.fillText("09:00",240,70);
   ctx.fillText("12:00",280,155);
   ctx.fillText("15:00",240,240);
   ctx.fillText("18:00",160,270);
   ctx.fillText("21:00",80,240);
   ctx.fillText("21:00",50,210);
   ctx.fillText("00:00",30,155);
   ctx.fillText("03:00",70,70);
   ctx.fillText("正常",310,20);
   ctx.fillText("异常",310,40);
   ctx.fillText("夜间",110,312);
   ctx.fillText("白天",250,312);
   ctx.closePath();

   //画圆
   ctx.beginPath();
   ctx.fillStyle="#008000";
   ctx.arc(300,15,3,0,2*Math.PI);
   ctx.fill();
   ctx.closePath();

   ctx.beginPath();
   ctx.fillStyle="#FF0000";
   ctx.arc(300,35,3,0,2*Math.PI);
   ctx.fill();
   ctx.closePath();

   //画矩形
   ctx.beginPath();
   ctx.fillStyle="#999999";
   ctx.fillRect(80,300,25,15);
   ctx.fillStyle="#b8dcdc";
   ctx.fillRect(220,300,25,15);
   ctx.closePath();
}

 

 

//描点 second天的秒数  r半径
function ctxPoint2(second,r){
   if(second >= 6*60*60 && second< 12*60*60){
      var radian = Math.sin(Math.PI * (43200-second) / 43200)*r;//三角形对边长度（最远距离）

      //第一象限  6点到12点
      var random_y = Math.random() * radian;//获取一个随机的y轴
      return [170+random_y/Math.tan(Math.PI * (43200-second) / 43200), 150-random_y];
   }else if(second >= 12*60*60 && second< 18*60*60){
      var radian = Math.sin(Math.PI * (second-43200) / 43200)*r;//三角形对边长度（最远距离）

      //第二象限  12点到18点
      var random_y = Math.random() * radian;//获取一个随机的y轴
      return [170+random_y/Math.tan(Math.PI * (second-43200) / 43200),150+random_y];
   }else if(second >= 18*60*60){
      var radian = Math.sin(Math.PI * (86400-second) / 43200)*r;//三角形对边长度（最远距离）

      //第三象限  18点到24点
      var random_y = Math.random() * radian;//获取一个随机的y轴
      return [170-random_y/Math.tan(Math.PI * (86400-second) / 43200),150+random_y];
   }else if(second < 6*60*60){
      var radian = Math.sin(Math.PI * second / 43200)*r;//三角形对边长度（最远距离）

      //第三象限  18点到24点
      var random_y = Math.random() * radian;//获取一个随机的y轴
      return [170-random_y/Math.sin(Math.PI * second / 43200),150-random_y];
   }
}