我也学人家发一个库存，本人承诺第一次这样干。因为刚刚删改了21篇博客，怕明天周排名会掉很多。删改的博客只有小部分留下了，大部分直接清除了，其中6篇在审核中。尽管没有人要求我这样做，但物竞天择，如果我的博客整体质量很差，注定在上走不了很远。一遍遍的删改不仅能让我认识到自身的不足，明确以后的优化方向，还可以提升自己博客的整体质量，大家不用为我惋惜。 效果图：
<!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 有着独有的情愫，加入我，让手中的代码变得生机勃勃，我是 “ 我不是费圆 ”，一个正在努力的前端程序员。 请查看我的置顶文章，我由衷感谢！
推荐阅读： JQ俄罗斯方块 Canvas点线相交 激流勇进V3.0 游动的花花肠子
