<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>雷达扫描动画</title>
<script src="js/jquery.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>
<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>
</body>
</html>
canvas雷达扫描模拟动画特效.rar
需积分: 0 61 浏览量
更新于2024-06-23
收藏 429KB RAR 举报
canvas雷达扫描模拟动画特效.rar
canvas雷达扫描模拟动画特效.rar
canvas雷达扫描模拟动画特效.rar
canvas雷达扫描模拟动画特效.rar
canvas雷达扫描模拟动画特效.rar
canvas雷达扫描模拟动画特效.rar
canvas雷达扫描模拟动画特效.rar
canvas雷达扫描模拟动画特效.rar
canvas雷达扫描模拟动画特效.rar
canvas雷达扫描模拟动画特效.rar
canvas雷达扫描模拟动画特效.rar
canvas雷达扫描模拟动画特效.rar
canvas雷达扫描模拟动画特效.rar
canvas雷达扫描模拟动画特效.rar
canvas雷达扫描模拟动画特效.rar
canvas雷达扫描模拟动画特效.rar
canvas雷达扫描模拟动画特效.rar
canvas雷达扫描模拟动画特效.rar
canvas雷达扫描模拟动画特效.rar
canvas雷达扫描模拟动画特效.rar
canvas雷达扫描模拟动画特效.rar
canvas雷达扫描模拟动画特效.rar
canvas雷达扫描模拟动画特效.rar
canvas雷达扫描模拟动画特效
canvas雷达扫描模拟动画特效.rar （3个子文件） 
canvas雷达扫描模拟动画特效 canvas雷达扫描模拟动画特效 js 
jquery.min.js 91KB
index.html 5KB
动画000001.gif 408KB
5星 · 资源好评率100%155 浏览量
185 浏览量
123 浏览量
2024-06-23 上传
147 浏览量
2024-06-23 上传
2024-06-23 上传
103 浏览量
2023-10-01 上传
2019-07-10 上传
121 浏览量
2023-11-17 上传
125 浏览量
156 浏览量
2023-10-01 上传
102 浏览量
140 浏览量
5星 · 资源好评率100%115 浏览量
资源评论
强迫领导写Bug
- 粉丝: 310
- 资源: 68
最新资源
- 19 工资发放明细表-可视化图表.xlsx
- 27 员工工资表（图表分析）.xlsx
- 23 财务报告工资数据图表模板.xlsx
- 22 财务报告工资数据图表模板.xlsx
- 24 工资表-年度薪资可视化图表.xlsx
- 26 财务分析部门工资支出图表.xlsx
- Python爬虫技术详解：从基础到实战.zip
- 25 工资费用支出表-可视化图表.xlsx
- 30公司各部门工资支出数据图表1.xlsx
- 29 员工月度工资支出数据图表.xlsx
- 28 工资表(自动计算，图表显示).xlsx
- 31 财务分析工资年度开支图表.xlsx
- 33 年度工资预算表（可视化看板）.xlsx
- 32 公司年度工资成本数据图表.xlsx
- 34 年度工资汇总-数据可视化看板.xlsx
- 36 财务报表新年度部门工资预算表.xlsx
