Canvas监测雷达 - 码农教程

效果图：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas二维雷达</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<style>
	html, body {
	  width: 100%;
	  height: 100%;
	  padding: 0;
	  margin: 0;
	  overflow: hidden;
	  font-family: Abel;
	}
	canvas {
	  background-color: #333;
	  -webkit-transform: scaleY(-1);
	          transform: scaleY(-1);
	}
	.info {
	  position: absolute;
	  left: 50px;
	  bottom: 50px;
	}
	h1 {
	  color: white;
	  letter-spacing: 3px;
	  margin: 0;
	}
	.message {
	  margin: 0;
	  color: #b99362;
	}
</style>
</head>
<body>
	<canvas id="myCanvas"></canvas>
	<div class="info">
	  <h1>Boss, CODING Please.</h1>
	  <p class="message">temp</p>
	</div>
</body>
<script>
	var c = $("#myCanvas")[0];
	var ctx = c.getContext("2d");
	var color_gold="185,147,98";
	var ww,wh;
	var center={x: 0,y: 0};

	function getWindowSize(){
	  ww=$(window).outerWidth();
	  wh=$(window).outerHeight();
	  c.width=ww;
	  c.height=wh;
	  center={x: ww/2,y: wh/2};
	  
	  ctx.restore();
	  ctx.translate(center.x,center.y);
	}
	getWindowSize();
	$(window).resize(getWindowSize);
	var enemies=Array(10).fill({}).map(
	  function(obj){
	    return {
	      r: Math.random()*200,
	      deg: Math.random()*360,
	      opacity: 0
	    } 
	  }
	);

	setInterval(draw,10);
	var time=0;

	var deg_to_pi=Math.PI/180;

	function Point(r,deg){
	  return {
	    x: r*Math.cos(deg_to_pi*deg),
	    y: r*Math.sin(deg_to_pi*deg),
	  };
	}
	function Color(op){
	  return "rgba("+color_gold+","+op+")";
	}

	function draw(){
	  time+=1;
	  
	  ctx.fillStyle = "#111";
	  ctx.beginPath();
	  ctx.rect(-2000,-2000,4000,4000);
	  ctx.fill();
	  
	  ctx.strokeStyle="rgba(255,255,255,0.1)";
	  ctx.moveTo(-ww/2,0);
	  ctx.lineTo(ww/2,0);
	  ctx.moveTo(0,-wh/2);
	  ctx.lineTo(0,wh/2);
	  ctx.stroke();
	  
	  ctx.strokeStyle=Color(1);
	  var r=200;
	  var deg=time;
	  var newpoint=Point(r,deg);
	  var line_deg = (time/2) % 360;
	  // console.log(line_deg);
	  
	  var line_deg_len=100;
	  for(var i=0;i<line_deg_len;i++){
	    // var deg = (time-i);
	    var deg1 = (line_deg-i-1) ;
	    var deg2 = (line_deg-i) ;
	    
	    var point1=Point(r,deg1);
	    var point2=Point(r,deg2);
	    var opacity=1-(i/line_deg_len)-0.3;
	    if (i==0) opacity=1;
	    ctx.beginPath();
	    // ctx.fillStyle="white";
	    ctx.fillStyle=Color(opacity);
	    ctx.moveTo(0,0);
	    ctx.lineTo(point1.x,point1.y);
	    ctx.lineTo(point2.x,point2.y);
	    // ctx.stroke();
	    ctx.fill();
	  }
	  
	  enemies.forEach(function(obj){
	    ctx.fillStyle=Color(obj.opacity);
	    var obj_point=Point(obj.r,obj.deg);
	    
	    ctx.beginPath();
	    ctx.arc(
	      obj_point.x,obj_point.y,
	      4,0,2*Math.PI
	    );
	    ctx.fill();
	    
	    ctx.strokeStyle= Color(obj.opacity);
	    var x_size=6;
	    ctx.lineWidth=4;
	    ctx.beginPath();
	    ctx.moveTo(obj_point.x-x_size,obj_point.y+x_size);
	    ctx.lineTo(obj_point.x+x_size,obj_point.y-x_size);
	    ctx.moveTo(obj_point.x+x_size,obj_point.y+x_size);
	    ctx.lineTo(obj_point.x-x_size,obj_point.y-x_size);
	    ctx.stroke();
	    
	    if (Math.abs(obj.deg - line_deg)<=1){
	      obj.opacity=1;
	      $(".message").text("Detected: "+ obj.r.toFixed(3) + " at " +obj.deg.toFixed(3));
	    }
	    obj.opacity*=0.99;
	    
	    ctx.strokeStyle= Color(obj.opacity);
	    ctx.lineWidth=1;
	    ctx.beginPath();
	    ctx.arc(
	      obj_point.x,obj_point.y,
	      10*(1/(obj.opacity+0.0001)),0,2*Math.PI
	    );
	    ctx.stroke();
	  });
	  
	  ctx.strokeStyle=Color(1);
	  var split =120;
	  var feature =15;
	  var start_r=230;
	  var len = 5;
	  
	  for(var i=0;i<split;i++){
	    ctx.beginPath();
	    var deg = (i/120) * 360;
	    
	    if (i%feature==0){
	      len=10;
	      ctx.lineWidth=3;
	    }else{
	      len=5; 
	      ctx.lineWidth=1;
	    }
	    var point1 =Point(start_r,deg);
	    var point2 =Point(start_r+len,deg);
	    
	    ctx.moveTo(point1.x,point1.y);
	    ctx.lineTo(point2.x,point2.y);
	    ctx.stroke();
	  }
	  
	  function CondCircle(r,lineWidth,func_cond){
	    
	    ctx.lineWidth=lineWidth;
	    ctx.strokeStyle=Color(1);
	    
	    ctx.beginPath();
	    for(var i=0;i<=360;i++){
	      var point =Point(r,i);
	      if (func_cond(i)){
	        ctx.lineTo(point.x,point.y);
	      }else{
	        ctx.moveTo(point.x,point.y);
	      }
	    }
	    ctx.stroke();
	   
	  }
	  // CondCircle(300);
	  
	  CondCircle(300,2,function(deg){
	    return ((deg+time/10)%180)<90;
	  });
	  CondCircle(100,1,function(deg){
	    return (deg%3)<1;
	  });
	  CondCircle(190,1,function(deg){
	    return true;
	  });
	}
</script>
</html>
已经很晚了，祝愿大家做个好梦。如果你也如我一般，对Canvas 或者 Css 有着独有的情愫，加入我，让手中的代码变得生机勃勃，我是 “ 我不是费圆 ”，一个正在努力的前端程序员。