【目标锁定特效】（Html+JS+CSS+效果+代码）

效果展示

下面两个效果是在同一个页面中出现的，为了便于观察，因为分为了两部分来展示。

这是锁定时产生的主体效果：

在这里插入图片描述

这是定位产生的效果（将位于页面左下角展示，也已在其他位置展示）

在这里插入图片描述

代码

index.html

DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>追光者♂title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Abel'>
      <link rel="stylesheet" href="css/style.css">
head>
<body>
<canvas id="myCanvas">canvas>
<div class="info">
  <h1>Boss, CODING Please.h1>
  <p class="message">tempp>
div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'>script>
    <script  src="js/index.js">script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

index.js

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;
  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=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,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,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;
  });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157

style.css

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

另外，为了便于大家查看，我也将这个特效的源文件上传到了“资源”中，喜欢的朋友可以去下载哦！

相关阅读:
广东工业大学上岸经验分享！
如何在node.js中避免命令行注入
PDF怎么转图片？四种转换方法分享
动态尺寸模型优化实践之Shape Constraint IR Part II
ENSP中用OSPF协议在MGRE结构中实现全网可达
vi vim是什么？有啥区别？怎么使用vim？
Vue 列表懒加载触底加载
MySQL库的操作
QML相关bug记录
北美”闲鱼”Poshmark，如何销售提高成单率？附防封养号攻略

原文地址：https://blog.csdn.net/qq_44731019/article/details/126315292