1.说明：
1.1 推荐指数：★★★★
1.2 环境：谷歌浏览器、微软vscode编辑器
1.3 熟悉sin和cos的函数与圆（画圆弧的关系）深入理解
比较真实的雷达界面扫描图
2.本次的模拟效果图：
3.css和js文件的引入：
3.1 同一个文件夹或者目录下引入：./xxx.js或者./xxx.css
3.2 大型的html文件或者一般在html文件的同一个目录下，建css文件夹和js文件夹，放入相应文件夹下，那么导入就是：css/xxx.css和js/xxxx.js
3.3 外部引入法：找到网址：比如：网址在代码注释里query-3.4.1.min.js，引入即可。
但是如果没有网络，那么html文件就不可用了，怎么办呢？有办法。
用浏览器打开，复制：网址在代码注释里jquery-3.4.1.min.js，打开。
全选复制（ctrl+a），在本地文件夹新建一个js文件：jquery-3.4.1.min.js，将复制的内容，黏贴进入，保存即可。向上面的js文件和css文件一样，作为本地js文件引入。
4.本次html文件代码：index.html
<code>
<title>Canvas带坐标雷达扫描特效/<title>
<link>
<canvas>
Warning！！Enemy is coming！！
cs-xo
/<code>
注意：外部引入和本地引入基本没什么区别，如果css和js=JavaScript写在html内，可能有不同，上面注释里有提到。
5.jquery-3.4.1.min.js代码不写了，可以自己去下载，免费的，或者上面的有讲解如何操作，此处略。
6.新建一个radar.js文件，代码如下：
<code>var c = $("#myCanvas")[0];
var ctx = c.getContext("2d");
/*雷达界面颜色=草地绿色*/
var color_gold="124,252,0"
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);
// 10=敌机数量，随机出现
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;
// 画圆的函数，三角函数sin和cos画圆法
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;
/*画长方形的背景颜色填充 "#111"=黑色;*/
ctx.fillStyle = "#111";
ctx.beginPath();
/*画长方形*/
ctx.rect(-2000,-2000,4000,4000);
ctx.fill();
/*十字垂直水平坐标线，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.lineTo(0,wh/2);
ctx.stroke();
// 雷达扫面绿色和半径大小
ctx.strokeStyle=Color(1);
var r=300;
var deg=time;
var newpoint=Point(r,deg);
var line_deg = (time/2) % 360;
// 雷达动态转动的扫描扇形的弧度为100，最大360
var line_deg_len=100;
for(var i=0;i<line> 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=Color(opacity);
ctx.moveTo(0,0);
ctx.lineTo(point1.x,point1.y);
ctx.lineTo(point2.x,point2.y);
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是半径
4,0,2*Math.PI
);
ctx.fill();
ctx.strokeStyle= Color(obj.opacity);
/*如果这样直接设置，ctx.strokeStyle= '#FF4500，那么敌机就是一直出现在屏幕';*/
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='yellow';
var split =120;
var feature =15; // 15个小格
var start_r=230; // 半径
var len = 5;
for(var i=0;i<split> ctx.beginPath();
var deg = (i/120) * 360;
if (i%feature==0){
len=10;
ctx.lineWidth=5;
}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='#00C78C';
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();
}
// 雷达外围的移动半弧形，300为半径，2代表粗细
CondCircle(300,2,function(deg){
return ((deg+time/10)%180)<90;
});
// 雷达中间绿色的移动半弧形，160为半径，2代表粗细
CondCircle(160,2,function(deg){
return ((deg+time/5)%180)<90;
});
// 雷达内的小圆圈，绿色虚线圈，1代表粗细
CondCircle(100,1,function(deg){
// 如果这里没有，那么颜色就是三条线函数里统一的颜色，也可以单独设立
ctx.strokeStyle='pink';
return (deg%3)<1;
});
}/<split>/<line>/<code>7.新建一个style.css文件，代码如下：
<code>html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
/*隐藏浏览器的条形伸缩*/
overflow: hidden;
}
/*定义画布*/
canvas {
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
/*显示警告信息位置设置*/
.info {
position: absolute;
left: 10px;
top: 10px;
}
h1 {
/*显示警告信息文字颜色设置*/
color:red;
letter-spacing: 0.5px;
margin: 0;
font-size:smaller;
}
.message {
/*显示雷达预警敌机的动态位置的文字颜色设置*/
margin: 0;
color:#00FFFF;
font-size: x-large;
}/<code>8.通过简单的例子，熟悉html、css和js的关系和布局等基本知识，熟练掌握基本操作。
分享到:
閱讀更多 易三一世 的文章
