radar js

<!doctype html>

 <html>

  <head>

   <meta charset="utf-8">

   <link href="style.css" rel="stylesheet" type="text/css">

   <title></title>

  </head>

 <body>

<canvas id="canv"></canvas>

<script src="radar.js" type="text/javascript"></script>

 </body>

</html>

body {

 margin: 0;

 padding: 0;

 overflow:scroll;

 width: 100%;

 background: #FFF;

 font-size: 1.05em;

}

var c = document.getElementById('canv');

 var w = c.width = window.innerWidth*1.5;

 var h = c.height = window.innerHeight*1.5;

 var $ = c.getContext('2d');

 window.addEventListener('resize', function() {

    c.width = window.innerWidth;

    c.height = window.innerHeight;

 }, false);

 function drawOnePoint(xx,yy,r,text) {

     u=2;

     var col = 63;

     var x=w/2+xx*r*3;

     var y=h/2+yy*r*3;

        var g = $.createRadialGradient(x, y, 0, x, y, r);

        g.addColorStop(0, 'hsla(' + col * u + ',95%,70%,1)');

        g.addColorStop(0.5, 'hsla(' + col * u + ',95%,50%,.8)');

        g.addColorStop(1, 'hsla(' + col * u + ',95%,20%,1)');

        $.fillStyle = g;

        $.beginPath();

        $.arc(x, y, r, 0, Math.PI * 2);

        $.fill();

        $.fillText(text,x,y)

 }

 function go() {

    $.fillStyle = 'hsla(0,0%,5%,1)';

    $.fillRect(0, 0, w, h);

    var r=2;

    drawOnePoint(0,0,r,"ap1");

     drawOnePoint(0,1,r,"ap2");

      drawOnePoint(1,0,r,"ap3");

       drawOnePoint(0,-1,r,"ap4");

       drawOnePoint(-1,0,r,"ap5");

      drawOnePoint(0,2,r,"ap2");

      drawOnePoint(2,0,r,"ap3");

       drawOnePoint(0,-2,r,"ap4");

       drawOnePoint(-2,0,r,"ap5");

         drawOnePoint(0,3,r,"ap2");

      drawOnePoint(3,0,r,"ap3");

       drawOnePoint(0,-3,r,"ap4");

       drawOnePoint(-3,0,r,"ap5");

       drawOnePoint(-30,0,r,"ap-30");

       drawOnePoint(0,50,r,"ap-50");

       drawOnePoint(0,70,r,"ap-70");

       drawOnePoint(0,40,r,"ap-40");

       drawOnePoint(0,30,r,"ap-30");

    window.requestAnimationFrame(go);

 }

 go()
相关文章
