用三角函数sin和cos画模拟雷达示意图的html代码解析

1.说明：

1.1 推荐指数：★★★★

1.2 环境：谷歌浏览器、微软vscode编辑器

1.3 熟悉sin和cos的函数与圆（画圆弧的关系）深入理解

比较真实的雷达界面扫描K N # K / R图

2.本次的模拟效果图：

3.css和js文件的引入：

3.1 同一个文件夹或者目录下引入：./xxx.js或者.P z U 5 % , M 0eta charset=\"utf-8\">
<title>Canvas带坐标雷达扫描特效</title>
<!--在线引入地址：https://code.jquery.com/jquery-3.4.1.min.js-->
<!--script-- src=X d t D\"./jquery.min.js\"></!G u / x--script-->
<script sr % Q T 6 vc=\"https://code.jquery.com/jquery-3.4.1.min.js\"></sc z g + -ript>
<!--将stylf L V T z |e作为单独css文件，引入，否认就是style和/st_ # g p _ ! yle的标签内-->
<!--采; 2 ^ t X S !用下面格式：liq X _nk法-->
<link type=\"text/csg 0 f 9 F N : ? ps\" href=\"./style.csK L H z Y as\" rel= O N R ! Q w\"stylesheet\" />
</head>
&lN P yt;body>

<canvas id=\"myCanvY ; Ras\"></canvas>
<divr * G H F . g class=\"info\">
<!--显示文字段落-->
<h1>Warning！！Enemy is coming！！</h1>
<!-- G 1 T [ _ v 1初始化cs-xo，之后就是message弹出动态数据-->
<p class=\"message\">cs-xo&l2 _ W h e A T I [t;/p>
</div>
<!--将radar.js# h N t Y Y . Z =作为单独js文件，引入，否认就是script和/script的标签内-->
<script src=\"./radarO / T #.js\"></script>
</body>
</html>

注意：外部引入和本地引入基本没什么区别，如果css和js=JavaScript写在htmlZ q 5内，可能有不同，上面注释里有提[ d - } c m s p N到。

5.jquery-3.4.1.min.js代码不写了，可以自己去下载，免费的，或者上面的有讲N l y H 7 t O解如何操作，此处略。

6.新建一个radar.js文件，代码如下：

var c = $(\"#myCanvQ C } d Y p N a {as\");
var ctx = c.getContext(\"2d\");
/*雷达界面颜色=草地绿色*/
var color_gold=\"124,252,0\"
var ww,wh;
var center= ] t B @{x: 0,y: 0};
// 定义函数
function getWindowSize(){
  ww=s a A : i & h 2 #$(window).outerWidth(; n ));
  wh=$(window).outerHeight();
  c.widthw Z  :=ww;
  c.height=wh;
  /// n X E y 7 L 4 | 中心坐标是窗口的一半
  center={xI X Z m d _: ww/2,y: wh/2};
  ctx.restore();
  ctx.translate(center.x,center.y);
}
// 启动函数
getWindowSize();
$(window).resize(getWindowSize);
// 10=敌机数量，随机出现
var enemies=Array(10).fill({}).map(
  function(obj){
    retur. - v tn {
      r: Math.r, ` k m  3 { Jandom()*200,
      deg: Math.random()*360,
      opacity: 0
    } 
  }
);
setIntL } ~ q T s B I 1erval(draw,10);
var time=0;
var deg_to_pi=Math.PI/180;
// 画圆的函数，三角函数sin和cos画圆法
function Point(r,deg){
  retC B k B # ` burj : Kn {
    x: r*Mak e ? qth.cos(deg_to_pi*deg),
    y: r*Math.sin(deg_to_pi*deg),
  };
}
/*定义颜色函数*/
function Color(op){
  return \_ d f Q i"rgba(\"+color_gold+\",\T i u"+op+\")\";
}
function draw(){
  timL 6 : . 9 m x 9 Ce+=1;
  /*画长方形的背景颜色填充 \"#111\"=黑色;*/
  ctx.fil?  X e E G 5 ^lStyle = \"#111\";
  ctX $ K wx.bP Y H d f ]eginPath();
  /*画长方形*/
  ctx.rect(-2000,-2000,4000,4000);} b u A B 4 b
  ctx.fill();
  /*十字垂t c T 3 4 k e 3 k直水平坐标线，0.1~1代表粗细*/ 
  ctx.strokeStyle=\"rgba(255,125,64,0.5)\";
  // ctx.strokeStyle=\"255,125,64\";// 默认粗细值为1
  ctx.moveTo(-ww/2,0);
  ctx.lineTo(ww/2,0);
  ctx.moveTo(0,-wh/2);
  ctx.l3 8 Q ; = t YineTo(0,wh/2);Q 7 / x - N
  ctx.stro| * * 7ke();
  // 雷达扫面绿色和半径大小
  ctx.strokeStyle=Color(1);
  var r=300;
  var deg=time;
  var new@ M 4 v Ypoint=Point(r,deg);
  var line_deg = (time/2) % 360;
  // 雷达动态转动的扫描扇形的弧度为100，最大360
  var l6 # b 8ine_deg_len=100;
  for(B 1 ? R i Q 3var i=0;i<lin@ x ?e_deg_len;i++){
    varx e , V L J s : deg1 = (line_deg-i-1) ;
    var deg2 = (line_deg-i) ;
    var point1=Point(r,deg1);
    var point2=Point(r,deg2);
    // 代表随着雷达扫描扇形的移p  Y 7 3 .动，颜色逐渐变淡
    vE S 3 D e Jar opacity=1-(i/line_deg_len)-0.3;
    if (i==0) opacity=1;
    ct^ @ w sx.beginPaS ! 1 Fth();
    // 雷~ p 8 Z  q v N }达扇形绿色动态渐变淡色
    ctx.fillStyle=Color(opacity);
    ctx.moveTo(0,0);
    ctx.lineToJ D @ m(point1.x,point1.y);
    ctx.lineTo(poinB Y ] Wt2.x,point2.y);
    ctx.fill} & f Y p E t E();
  }
  enemies.forEach(function(obj){
    // 敌机出y h ? H现的原点
    ctx.fillStyle=Color(obj.opacity);
    varH w f g O e r ] u obj_point=Point(obj.r- 0 $ X L U,obj.O J Tdeg);
    ctx.beginPath();D T 5 N C X X
    ctx.arc(
      obj_point.x,obj_point.y,
      // 绿色敌机出现的小圆点4是半径
      4,0,2*Math.PI
    );
    ctx.fill();
    ctx.strokeStyle= Color(obj.opacity);
    /*如果这样L X 8 3 Z v直接设置，ctx.strokeStyle=K - P l / F \'#FF4500，那么敌机就是一直出现在屏幕\';*/
    var x_size=6;
    /* 雷达显示敌机目- d D ] R k G [标大小设置*/
    ctx.lineWidth=4;
    ctxP , +  q 7 P.beginPath();
    ctx.moveTo(obj_f q h J ^ M 7point.x-x_size,obj_point.y+x_size);
    ct{ l dx.lineTo(obj_point.x+x_sizee | &,obj_point.y-x_size);
    ctx.moveTo(obj_point.x+r 0 d m 1 H 8 _ &x_size,obj_point.y+x_size)K # n . : ( L K;
    ctx.line} @ 5 M PTo(obj_point.x-x_size,obj_point.y-xQ _ ; Q O_size);
    ctx.stroke();
    if (Math.abs(o= $ {bj.deg - line_deg)<=1){
      obj.op: h I 9 a W d iacity=1;
      // 显示左上角侦查到的地理坐标
      $i e 5 X q(\".messap b u I 8 M 1 7ge\").text(\"Detected: \"+ obj.r.toFixed(3) + \" at \" +obj.deg.to@ ` 5  ~ e 8 FFixed(3));
    }
    obj.opaciJ X V A + F Z gty*=0.99;
    // 显示敌机出现的涟漪圈的颜色
    ctx.strN [ ` F $ KokeStyle= Color(obj.o= + [ ( ~ epacity);
    /*目标敌机显示后的圆圈涟漪粗细设置*/
    ctx.lineWidth=1;
    ctx.beginPath();. ) w b g r F u
    ctx& { M 3 T } C.arc(
      obj_point.x,obj_point.y,
      10*(1/(obj.opacitJ e 8yT q B ; ( _ / 3 5+0.0001)),0,2*Math.PI
    );
    ctx.stroke();
  });
  // 雷达虚点固定圆盘的颜色，半径等设置
  ctx.strokeStyle=\'yellowH : V C P A i N +\';
  var split =120;
  vas . O } Z Mr feature =15;   // 15个小格
  var start_r=230; // 半径
  var len = 5;
  for(varf + g . d i=0;i<split;i++){
    ctx.beginPath();
    var deg{ @ a k X P ) = (i/120) * 360;
    if (i%feature==0){
      len=10;
      ctx.lineWidth=5;
    }else{
      len=5; 
      ctx.lineWidthK _ I e=1;
    }
    var point1 =Point(start_r,deg);
    var point2 =PointE X U 6 Q(start_r+len,deg);G 0 j
    ctx.moveTo(point1.x,point1.yY ` B I e d $ ?);
    ctx.lineTo(point2.x,point2.y);
    ctx.stroke() V  ;
  }
  /*画圈函数定义,下面三个画圆函数的定义*/
  function CondCircle(r,lineWidth,func_cond){
    ctx.lineWidth=lin& a H ? K ! ~ 3 GeWidth;
    /* 颜色定义*/
    /*注意颜色定义：有引号的和没有引号的区别，就是前面@ _ K U m }  z有没有颜色图标*/
    ctx.strokeStyle=\'#00C78C\';
    ctx.beginPath();
    for(var i=0;i<=360;3 ~ )i++){
      var point =Point(r,i);
      if (func_cond(i)){
        ctx.lineTo(point.x,point.y);
      }else{
        ctx.moveTo(point.x,poL Q } W xint.~ w h m `y);
      }
    }
    ctx.stroke();
  }
  /d o % ( 5 . 3/ 雷达外围的移动半弧形，300为半径，2代表粗细
  CondCi. h % a q / crcle(300,2,function(deg){
    return ((deg+time/10)%180)<90;
  });
  // 雷达中间绿色的移动半弧形，160为半径，2代表粗细
  CondCircle(160,2,func1 ~ q s g o ;tion(deg){
    return ((deg+time/5)%180)<90;
  });
  // 雷达内的小圆圈，绿色虚线圈，1代表粗细
  CondCircle(100,1,function(deg){
    // 如果这里没有，那么颜色就是三条线函数里C P #统一的颜色，也可以单独设立
    ctx.strokeStyle=\'pink\';
    return (deg%3)<1;
  });
  
}

7.新建一个style.css文件，代码如下：

html, body {
  widthB 7 4 y: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  /*隐藏浏览器的条形伸缩*/
  overflow: hidden;
}
/*定义画布*/
canvas {
  -webkit-transform: scale{ k |Y(-1);
          transform: scaleY(-1);
}
/*显示警告信息位置设置*/
.info {
  pU n 6 _ _ p C  kosition: absolute;
  left: 10px;
  top: 10px;
}
h1 {
  /*显示警告信息文字颜色设置*/
  color:red;
  letter-spacing: 0.5px;
  margin: 0;
  font-size:small, i H O m Q K - verZ ( L A Q;
}
.T E 9 n a ?message {
  /*显示雷达预警敌机的动态位置的文字颜色设置*/+ h E b 2 G s :
  margin: 0;
  color:5 I U P + h 3 Z#00FFFF;
  font-size: x-large;
}

8.通过简单的例子，熟悉html、css和js的关系E X n O ; 1 B和布局等基本知识，熟练掌握基本操作。