Canvas监测雷达

我也学人家发一个库存，本人承诺第一次这样干。因为刚刚删改了21篇博客，怕明天周排名会掉很多。删改的博客只有小部分留下了，大部分直接清除了，其中6篇在审核中。尽管没有人要求我这样做，但物竞天择，如果我的博客整体质量很差，注定在CSDN上走不了很远。一遍遍的删改不仅能让我认识到自身的不足，明确以后的优化方向，还可以提升自己博客的整体质量，大家不用为我惋惜。
效果图：

<!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
游动的花花肠子

Canvas监测雷达相关推荐

利用Canvas绘制雷达图
雷达图(蜘蛛网图)是一种常见的数据分析图表,本文采用canvas来绘制雷达图,并最终封装成一个小组件.首先来看一下最终的效果图: 如何画正多边形以正五边形雷达图为例(其他任意正多边形也一样),如下图 ...
前端vue js 高德地图实现雷达扫描加载，借鉴百度地图等方法，采用Canvas解决雷达背景透明度问题，解决Canvas动态指针扫描造成浏览器卡顿问题
前端vue js 高德地图实现雷达扫描加载,借鉴百度地图等方法,采用Canvas解决雷达背景透明度问题,解决Canvas动态指针扫描造成浏览器卡顿问题经过3天的尝试,借鉴了好几个博客的思路,开发了一 ...
canvas 实现雷达图
1. data 数据 //data:雷达图所依据的数据 var data = {scoreData : [{ text : '攻击', value : '45' },{ text : '力量', va ...
前端js+canvas实现雷达扫描效果
//页面容器<div class="canvas_loop" v-show="isCanvas"><canvas id="can&q ...
倒计时效果动画（canvas仿雷达）
场景描述: 在限时竞速类活动中,为给用户渲染紧张的时间氛围,往往在最后五秒采用不一样的时间样式,这里实现的是一种类似雷达的效果(具体效果由于本人不会制作动图,各位看官自行新建html后缀文件复制代码运 ...
HTML5 Canvas制作雷达图实战
雷达图又叫蜘蛛网图,是一种对各项数据查看很明显的表现图,在很多游戏中,对游戏中的每个角色的分析图一般也用这种图. 下面,用HTML5的Cavas来实现雷达图. 效果一.创建Canvas var mW ...
html5雷达图绘制,Canvas 绘制雷达图
最近做的一个需求,场景之一是绘制一个雷达图,找了一圈,似乎 AntV 下的 F2 很适合拿来主义: 但是接着又考虑了一下,我当前所做的项目并不是可视化项目,今后大概率也不会有这种可视化图表的需求,只是 ...
html5 canvas实现雷达扫描动画特效
先看一下最终效果实现思路绘制4个圆绘制一个十字线绘制一个扫描的指针让指针转起来雷达构造函数 function Radar(){this.renderArr=[];//待渲染对象存储数组th ...
canvas 绘制雷达效果：扇形区域颜色渐变渲染
项目中因为需要制作雷达效果,雷达扇形区域需要根据参数设置不同角度,并且是透明渐变的,首先想到了canvas的线性渐变,在这里感谢此博主的文章: https://www.cnblogs.com/ufex ...
canvas绘制雷达图
最近做的一个需求,场景之一是绘制一个雷达图,找了一圈,似乎 AntV 下的 F2 很适合拿来主义: 但是接着又考虑了一下,我当前所做的项目并不是可视化项目,今后大概率也不会有这种可视化图表的需求,只是 ...

Canvas监测雷达

Canvas监测雷达相关推荐

最新文章

热门文章