<!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()