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
158
159
160
161
162
163
164
165
166
167
168
169
|
touch /mnt/mydisk/home/sun-panel/config/custom/dianji.js && cat > /mnt/mydisk/home/sun-panel/config/custom/dianji.js <<'EOF'
class Circle {
constructor({ origin, speed, color, angle, context }) {
this.origin = origin; // 初始位置
this.position = { ...this.origin }; // 当前位置
this.color = color; // 颜色
this.speed = speed; // 速度
this.angle = angle; // 角度
this.context = context; // 绘制上下文
this.renderCount = 0; // 渲染计数
}
draw() {
// 绘制圆形
this.context.fillStyle = this.color;
this.context.beginPath();
this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2);
this.context.fill();
}
move() {
// 移动圆形
this.position.x = (Math.sin(this.angle) * this.speed) + this.position.x;
this.position.y = (Math.cos(this.angle) * this.speed) + this.position.y + (this.renderCount * 0.3);
this.renderCount++;
}
}
class Boom {
constructor({ origin, context, circleCount = 10, area }) {
this.origin = origin; // 初始位置
this.context = context; // 绘制上下文
this.circleCount = circleCount; // 圆形数量
this.area = area; // 区域
this.stop = false; // 停止标志
this.circles = []; // 圆形数组
}
randomArray(range) {
// 从数组中随机取值
const length = range.length;
const randomIndex = Math.floor(length * Math.random());
return range[randomIndex];
}
randomColor() {
// 随机生成颜色
const range = ['8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
return '#' + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range);
}
randomRange(start, end) {
// 在范围内生成随机数
return (end - start) * Math.random() + start;
}
init() {
// 初始化Boom对象
for (let i = 0; i < this.circleCount; i++) {
const circle = new Circle({
context: this.context,
origin: this.origin,
color: this.randomColor(),
angle: this.randomRange(Math.PI - 1, Math.PI + 1),
speed: this.randomRange(1, 6)
});
this.circles.push(circle);
}
}
move() {
// 移动所有圆形，并检测是否超出区域
this.circles.forEach((circle, index) => {
if (circle.position.x > this.area.width || circle.position.y > this.area.height) {
return this.circles.splice(index, 1);
}
circle.move();
});
if (this.circles.length === 0) {
this.stop = true;
}
}
draw() {
// 绘制所有圆形
this.circles.forEach(circle => circle.draw());
}
}
class CursorSpecialEffects {
constructor() {
// 鼠标特效主类
this.computerCanvas = document.createElement('canvas'); // 计算用Canvas
this.renderCanvas = document.createElement('canvas'); // 渲染用Canvas
this.computerContext = this.computerCanvas.getContext('2d'); // 计算用上下文
this.renderContext = this.renderCanvas.getContext('2d'); // 渲染用上下文
this.globalWidth = window.innerWidth; // 全局宽度
this.globalHeight = window.innerHeight; // 全局高度
this.booms = []; // Boom对象数组
this.running = false; // 运行标志
}
handleMouseDown(e) {
// 处理鼠标点击事件
const boom = new Boom({
origin: { x: e.clientX, y: e.clientY },
context: this.computerContext,
area: {
width: this.globalWidth,
height: this.globalHeight
}
});
boom.init();
this.booms.push(boom);
this.running || this.run();
}
handlePageHide() {
// 处理页面隐藏事件
this.booms = [];
this.running = false;
}
init() {
// 初始化方法
const style = this.renderCanvas.style;
style.position = 'fixed';
style.top = style.left = 0;
style.zIndex = '999999999999999999999999999999999999999999';
style.pointerEvents = 'none';
style.width = this.renderCanvas.width = this.computerCanvas.width = this.globalWidth;
style.height = this.renderCanvas.height = this.computerCanvas.height = this.globalHeight;
document.body.append(this.renderCanvas);
window.addEventListener('mousedown', this.handleMouseDown.bind(this));
window.addEventListener('pagehide', this.handlePageHide.bind(this));
}
run() {
// 运行方法
this.running = true;
if (this.booms.length === 0) {
return this.running = false;
}
requestAnimationFrame(this.run.bind(this));
this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight);
this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight);
this.booms.forEach((boom, index) => {
if (boom.stop) {
return this.booms.splice(index, 1);
}
boom.move();
boom.draw();
});
this.renderContext.drawImage(this.computerCanvas, 0, 0, this.globalWidth, this.globalHeight);
}
}
const cursorSpecialEffects = new CursorSpecialEffects();
cursorSpecialEffects.init();
EOF
|
