fix:删除无用组件
This commit is contained in:
zyronon
@@ -66,6 +66,5 @@
|
||||
"commitizen": {
|
||||
"path": "./node_modules/cz-conventional-changelog"
|
||||
}
|
||||
},
|
||||
"packageManager": "pnpm@9.1.4+sha512.9df9cf27c91715646c7d675d1c9c8e41f6fce88246f1318c1aa6a1ed1aeb3c4f032fcdf4ba63cc69c4fe6d634279176b5358727d8f2cc1e65b65f43ce2f8bfb0"
|
||||
}
|
||||
}
|
||||
|
||||
102
pnpm-lock.yaml
generated
102
pnpm-lock.yaml
generated
@@ -129,12 +129,6 @@ importers:
|
||||
unocss:
|
||||
specifier: ^66.4.0
|
||||
version: 66.4.0(postcss@8.5.6)(vite@7.0.3(@types/node@24.0.11)(jiti@2.4.2)(sass@1.89.2))
|
||||
unplugin-auto-import:
|
||||
specifier: '^19.3.0 '
|
||||
version: 19.3.0(@vueuse/core@9.13.0(vue@3.5.17(typescript@5.8.3)))
|
||||
unplugin-vue-components:
|
||||
specifier: ^28.8.0
|
||||
version: 28.8.0(@babel/parser@7.28.0)(vue@3.5.17(typescript@5.8.3))
|
||||
unplugin-vue-macros:
|
||||
specifier: ^2.14.5
|
||||
version: 2.14.5(@vueuse/core@9.13.0(vue@3.5.17(typescript@5.8.3)))(esbuild@0.25.6)(rollup@4.44.2)(typescript@5.8.3)(vite@7.0.3(@types/node@24.0.11)(jiti@2.4.2)(sass@1.89.2))(vue-tsc@3.0.1(typescript@5.8.3))(vue@3.5.17(typescript@5.8.3))
|
||||
@@ -1869,10 +1863,6 @@ packages:
|
||||
resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
|
||||
engines: {node: '>=0.8.0'}
|
||||
|
||||
escape-string-regexp@5.0.0:
|
||||
resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
esm@3.2.25:
|
||||
resolution: {integrity: sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==}
|
||||
engines: {node: '>=6'}
|
||||
@@ -2421,9 +2411,6 @@ packages:
|
||||
js-tokens@4.0.0:
|
||||
resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
|
||||
|
||||
js-tokens@9.0.1:
|
||||
resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
|
||||
|
||||
js-yaml@4.1.0:
|
||||
resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
|
||||
hasBin: true
|
||||
@@ -3092,9 +3079,6 @@ packages:
|
||||
engines: {node: '>=14.0.0'}
|
||||
hasBin: true
|
||||
|
||||
scule@1.3.0:
|
||||
resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
|
||||
|
||||
semver-greatest-satisfied-range@1.1.0:
|
||||
resolution: {integrity: sha512-Ny/iyOzSSa8M5ML46IAx3iXc6tfOsYU2R4AXi2UpHk60Zrgyq6eqPj/xiOfS0rRl/iiQ/rdJkVjw/5cdUyCntQ==}
|
||||
engines: {node: '>= 0.10'}
|
||||
@@ -3259,9 +3243,6 @@ packages:
|
||||
resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
|
||||
engines: {node: '>=8'}
|
||||
|
||||
strip-literal@3.0.0:
|
||||
resolution: {integrity: sha512-TcccoMhJOM3OebGhSBEmp3UZ2SfDMZUEBdRA/9ynfLi8yYajyWX3JiXArcJt4Umh4vISpspkQIY8ZZoCqjbviA==}
|
||||
|
||||
structured-source@4.0.0:
|
||||
resolution: {integrity: sha512-qGzRFNJDjFieQkl/sVOI2dUjHKRyL9dAJi2gCPGJLbJHBIkyOHxjuocpIEfbLioX+qSJpvbYdT49/YCdMznKxA==}
|
||||
|
||||
@@ -3400,10 +3381,6 @@ packages:
|
||||
undici-types@7.8.0:
|
||||
resolution: {integrity: sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==}
|
||||
|
||||
unimport@4.2.0:
|
||||
resolution: {integrity: sha512-mYVtA0nmzrysnYnyb3ALMbByJ+Maosee2+WyE0puXl+Xm2bUwPorPaaeZt0ETfuroPOtG8jj1g/qeFZ6buFnag==}
|
||||
engines: {node: '>=18.12.0'}
|
||||
|
||||
union-value@1.0.1:
|
||||
resolution: {integrity: sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
@@ -3427,18 +3404,6 @@ packages:
|
||||
vite:
|
||||
optional: true
|
||||
|
||||
unplugin-auto-import@19.3.0:
|
||||
resolution: {integrity: sha512-iIi0u4Gq2uGkAOGqlPJOAMI8vocvjh1clGTfSK4SOrJKrt+tirrixo/FjgBwXQNNdS7ofcr7OxzmOb/RjWxeEQ==}
|
||||
engines: {node: '>=14'}
|
||||
peerDependencies:
|
||||
'@nuxt/kit': ^3.2.2
|
||||
'@vueuse/core': '*'
|
||||
peerDependenciesMeta:
|
||||
'@nuxt/kit':
|
||||
optional: true
|
||||
'@vueuse/core':
|
||||
optional: true
|
||||
|
||||
unplugin-combine@1.2.1:
|
||||
resolution: {integrity: sha512-qGkXjQo8yTq5QknP8f8p8/Aw3BJKqclTbTe8de0pC6exHzpoPBnH69Eztf00G2oc50IaIlV7KX/g4cKgzCq9BA==}
|
||||
engines: {node: '>=16.14.0'}
|
||||
@@ -3474,19 +3439,6 @@ packages:
|
||||
resolution: {integrity: sha512-8U/MtpkPkkk3Atewj1+RcKIjb5WBimZ/WSLhhR3w6SsIj8XJuKTacSP8g+2JhfSGw0Cb125Y+2zA/IzJZDVbhA==}
|
||||
engines: {node: '>=18.12.0'}
|
||||
|
||||
unplugin-vue-components@28.8.0:
|
||||
resolution: {integrity: sha512-2Q6ZongpoQzuXDK0ZsVzMoshH0MWZQ1pzVL538G7oIDKRTVzHjppBDS8aB99SADGHN3lpGU7frraCG6yWNoL5Q==}
|
||||
engines: {node: '>=14'}
|
||||
peerDependencies:
|
||||
'@babel/parser': ^7.15.8
|
||||
'@nuxt/kit': ^3.2.2 || ^4.0.0
|
||||
vue: 2 || 3
|
||||
peerDependenciesMeta:
|
||||
'@babel/parser':
|
||||
optional: true
|
||||
'@nuxt/kit':
|
||||
optional: true
|
||||
|
||||
unplugin-vue-define-options@1.5.5:
|
||||
resolution: {integrity: sha512-V50sWbpoADsjyVgovxewoLo2IDW0zfgHJbKiAl2EdZT8OL3g3h1Mz3QKoAAu09i8+LnkDatIEQMgBVeHHxWXNg==}
|
||||
engines: {node: '>=16.14.0'}
|
||||
@@ -5652,8 +5604,6 @@ snapshots:
|
||||
|
||||
escape-string-regexp@1.0.5: {}
|
||||
|
||||
escape-string-regexp@5.0.0: {}
|
||||
|
||||
esm@3.2.25: {}
|
||||
|
||||
esniff@2.0.1:
|
||||
@@ -6251,8 +6201,6 @@ snapshots:
|
||||
|
||||
js-tokens@4.0.0: {}
|
||||
|
||||
js-tokens@9.0.1: {}
|
||||
|
||||
js-yaml@4.1.0:
|
||||
dependencies:
|
||||
argparse: 2.0.1
|
||||
@@ -6971,8 +6919,6 @@ snapshots:
|
||||
optionalDependencies:
|
||||
'@parcel/watcher': 2.5.1
|
||||
|
||||
scule@1.3.0: {}
|
||||
|
||||
semver-greatest-satisfied-range@1.1.0:
|
||||
dependencies:
|
||||
sver-compat: 1.5.0
|
||||
@@ -7156,10 +7102,6 @@ snapshots:
|
||||
|
||||
strip-json-comments@3.1.1: {}
|
||||
|
||||
strip-literal@3.0.0:
|
||||
dependencies:
|
||||
js-tokens: 9.0.1
|
||||
|
||||
structured-source@4.0.0:
|
||||
dependencies:
|
||||
boundary: 2.0.0
|
||||
@@ -7313,23 +7255,6 @@ snapshots:
|
||||
undici-types@7.8.0:
|
||||
optional: true
|
||||
|
||||
unimport@4.2.0:
|
||||
dependencies:
|
||||
acorn: 8.15.0
|
||||
escape-string-regexp: 5.0.0
|
||||
estree-walker: 3.0.3
|
||||
local-pkg: 1.1.1
|
||||
magic-string: 0.30.17
|
||||
mlly: 1.7.4
|
||||
pathe: 2.0.3
|
||||
picomatch: 4.0.2
|
||||
pkg-types: 2.2.0
|
||||
scule: 1.3.0
|
||||
strip-literal: 3.0.0
|
||||
tinyglobby: 0.2.14
|
||||
unplugin: 2.3.5
|
||||
unplugin-utils: 0.2.4
|
||||
|
||||
union-value@1.0.1:
|
||||
dependencies:
|
||||
arr-union: 3.1.0
|
||||
@@ -7371,17 +7296,6 @@ snapshots:
|
||||
- postcss
|
||||
- supports-color
|
||||
|
||||
unplugin-auto-import@19.3.0(@vueuse/core@9.13.0(vue@3.5.17(typescript@5.8.3))):
|
||||
dependencies:
|
||||
local-pkg: 1.1.1
|
||||
magic-string: 0.30.17
|
||||
picomatch: 4.0.2
|
||||
unimport: 4.2.0
|
||||
unplugin: 2.3.5
|
||||
unplugin-utils: 0.2.4
|
||||
optionalDependencies:
|
||||
'@vueuse/core': 9.13.0(vue@3.5.17(typescript@5.8.3))
|
||||
|
||||
unplugin-combine@1.2.1(esbuild@0.25.6)(rollup@4.44.2)(unplugin@1.16.1)(vite@7.0.3(@types/node@24.0.11)(jiti@2.4.2)(sass@1.89.2)):
|
||||
optionalDependencies:
|
||||
esbuild: 0.25.6
|
||||
@@ -7401,22 +7315,6 @@ snapshots:
|
||||
pathe: 2.0.3
|
||||
picomatch: 4.0.2
|
||||
|
||||
unplugin-vue-components@28.8.0(@babel/parser@7.28.0)(vue@3.5.17(typescript@5.8.3)):
|
||||
dependencies:
|
||||
chokidar: 3.6.0
|
||||
debug: 4.4.1
|
||||
local-pkg: 1.1.1
|
||||
magic-string: 0.30.17
|
||||
mlly: 1.7.4
|
||||
tinyglobby: 0.2.14
|
||||
unplugin: 2.3.5
|
||||
unplugin-utils: 0.2.4
|
||||
vue: 3.5.17(typescript@5.8.3)
|
||||
optionalDependencies:
|
||||
'@babel/parser': 7.28.0
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
unplugin-vue-define-options@1.5.5(vue@3.5.17(typescript@5.8.3)):
|
||||
dependencies:
|
||||
'@vue-macros/common': 1.16.1(vue@3.5.17(typescript@5.8.3))
|
||||
|
||||
@@ -1,460 +0,0 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.city {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.city img {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<title>放烟花模拟</title>
|
||||
</head>
|
||||
<body onselectstart="return false">
|
||||
<canvas id="cas" style="background-color: rgba(0, 5, 24, 1)">浏览器不支持canvas</canvas>
|
||||
<img src="moon.png" alt="" id="moon" style="visibility: hidden"/>
|
||||
<div style="display: none">
|
||||
<div class="shape">新年快乐</div>
|
||||
<div class="shape">合家幸福</div>
|
||||
<div class="shape">HAPPY</div>
|
||||
</div>
|
||||
<audio src="boom.mp3" preload="auto"></audio>
|
||||
<audio src="boom.mp3" preload="auto"></audio>
|
||||
<audio src="boom.mp3" preload="auto"></audio>
|
||||
<audio src="boom.mp3" preload="auto"></audio>
|
||||
<audio src="boom.mp3" preload="auto"></audio>
|
||||
<audio src="boom.mp3" preload="auto"></audio>
|
||||
<audio src="shotfire.mp3" preload="auto"></audio>
|
||||
<audio src="shotfire.mp3" preload="auto"></audio>
|
||||
<audio src="shotfire.mp3" preload="auto"></audio>
|
||||
<script>
|
||||
let canvas = document.getElementById("cas");
|
||||
let ocas = document.createElement("canvas");
|
||||
let octx = ocas.getContext("2d");
|
||||
let ctx = canvas.getContext("2d");
|
||||
ocas.width = canvas.width = window.innerWidth;
|
||||
ocas.height = canvas.height = window.innerHeight;
|
||||
let bigbooms = [];
|
||||
|
||||
window.onload = function () {
|
||||
initAnimate();
|
||||
};
|
||||
|
||||
function initAnimate() {
|
||||
drawBg();
|
||||
|
||||
lastTime = new Date();
|
||||
animate();
|
||||
}
|
||||
|
||||
let lastTime;
|
||||
|
||||
function animate() {
|
||||
ctx.save();
|
||||
ctx.globalCompositeOperation = "destination-out";
|
||||
ctx.globalAlpha = 0.1;
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.restore();
|
||||
|
||||
let newTime = new Date();
|
||||
if (newTime - lastTime > 200 + (window.innerHeight - 767) / 2) {
|
||||
let random = Math.random() * 100 > 2 ? true : false;
|
||||
let x = getRandom(canvas.width / 5, (canvas.width * 4) / 5);
|
||||
let y = getRandom(50, 200);
|
||||
if (random) {
|
||||
let bigboom = new Boom(
|
||||
getRandom(canvas.width / 3, (canvas.width * 2) / 3),
|
||||
2,
|
||||
"#FFF",
|
||||
{x: x, y: y}
|
||||
);
|
||||
bigbooms.push(bigboom);
|
||||
} else {
|
||||
let bigboom = new Boom(
|
||||
getRandom(canvas.width / 3, (canvas.width * 2) / 3),
|
||||
2,
|
||||
"#FFF",
|
||||
{
|
||||
x: canvas.width / 2,
|
||||
y: 200,
|
||||
},
|
||||
document.querySelectorAll(".shape")[
|
||||
parseInt(
|
||||
getRandom(0, document.querySelectorAll(".shape").length)
|
||||
)
|
||||
]
|
||||
);
|
||||
bigbooms.push(bigboom);
|
||||
}
|
||||
lastTime = newTime;
|
||||
}
|
||||
|
||||
stars.foreach(function () {
|
||||
this.paint();
|
||||
});
|
||||
|
||||
drawMoon();
|
||||
|
||||
bigbooms.foreach(function (index) {
|
||||
let that = this;
|
||||
if (!this.dead) {
|
||||
this._move();
|
||||
this._drawLight();
|
||||
} else {
|
||||
this.booms.foreach(function (index) {
|
||||
if (!this.dead) {
|
||||
this.moveTo(index);
|
||||
} else if (index === that.booms.length - 1) {
|
||||
bigbooms.splice(bigbooms.indexOf(that), 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
raf(animate);
|
||||
}
|
||||
|
||||
function drawMoon() {
|
||||
let moon = document.getElementById("moon");
|
||||
let centerX = canvas.width - 200,
|
||||
centerY = 100,
|
||||
width = 80;
|
||||
if (moon.complete) {
|
||||
ctx.drawImage(moon, centerX, centerY, width, width);
|
||||
} else {
|
||||
moon.onload = function () {
|
||||
ctx.drawImage(moon, centerX, centerY, width, width);
|
||||
};
|
||||
}
|
||||
let index = 0;
|
||||
for (let i = 0; i < 10; i++) {
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
ctx.arc(
|
||||
centerX + width / 2,
|
||||
centerY + width / 2,
|
||||
width / 2 + index,
|
||||
0,
|
||||
2 * Math.PI
|
||||
);
|
||||
ctx.fillStyle = "rgba(240,219,120,0.005)";
|
||||
index += 2;
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
}
|
||||
}
|
||||
|
||||
Array.prototype.foreach = function (callback) {
|
||||
for (let i = 0; i < this.length; i++) {
|
||||
if (this[i] !== null) callback.apply(this[i], [i]);
|
||||
}
|
||||
};
|
||||
|
||||
let raf =
|
||||
window.requestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame ||
|
||||
window.mozRequestAnimationFrame ||
|
||||
window.oRequestAnimationFrame ||
|
||||
window.msRequestAnimationFrame ||
|
||||
function (callback) {
|
||||
window.setTimeout(callback, 1000 / 60);
|
||||
};
|
||||
|
||||
canvas.onclick = function () {
|
||||
let x = event.clientX;
|
||||
let y = event.clientY;
|
||||
let bigboom = new Boom(
|
||||
getRandom(canvas.width / 3, (canvas.width * 2) / 3),
|
||||
2,
|
||||
"#FFF",
|
||||
{x: x, y: y}
|
||||
);
|
||||
bigbooms.push(bigboom);
|
||||
};
|
||||
|
||||
let Boom = function (x, r, c, boomArea, shape) {
|
||||
this.booms = [];
|
||||
this.x = x;
|
||||
this.y = canvas.height + r;
|
||||
this.r = r;
|
||||
this.c = c;
|
||||
this.shape = shape || false;
|
||||
this.boomArea = boomArea;
|
||||
this.theta = 0;
|
||||
this.dead = false;
|
||||
this.ba = parseInt(getRandom(80, 200));
|
||||
|
||||
let audio = document.getElementsByTagName("audio");
|
||||
for (let i = 0; i < audio.length; i++) {
|
||||
if (
|
||||
audio[i].src.indexOf("shotfire") >= 0 &&
|
||||
(audio[i].paused || audio[i].ended)
|
||||
) {
|
||||
audio[i].play();
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
Boom.prototype = {
|
||||
_paint: function () {
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = this.c;
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
},
|
||||
_move: function () {
|
||||
let dx = this.boomArea.x - this.x,
|
||||
dy = this.boomArea.y - this.y;
|
||||
this.x = this.x + dx * 0.01;
|
||||
this.y = this.y + dy * 0.01;
|
||||
|
||||
if (Math.abs(dx) <= this.ba && Math.abs(dy) <= this.ba) {
|
||||
if (this.shape) {
|
||||
this._shapBoom();
|
||||
} else this._boom();
|
||||
this.dead = true;
|
||||
} else {
|
||||
this._paint();
|
||||
}
|
||||
},
|
||||
_drawLight: function () {
|
||||
ctx.save();
|
||||
ctx.fillStyle = "rgba(255,228,150,0.3)";
|
||||
ctx.beginPath();
|
||||
ctx.arc(
|
||||
this.x,
|
||||
this.y,
|
||||
this.r + 3 * Math.random() + 1,
|
||||
0,
|
||||
2 * Math.PI
|
||||
);
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
},
|
||||
_boom: function () {
|
||||
let fragNum = getRandom(100, 300);
|
||||
let style = getRandom(0, 10) >= 5 ? 1 : 2;
|
||||
let color;
|
||||
if (style === 1) {
|
||||
color = {
|
||||
a: parseInt(getRandom(128, 255)),
|
||||
b: parseInt(getRandom(128, 255)),
|
||||
c: parseInt(getRandom(128, 255)),
|
||||
};
|
||||
}
|
||||
|
||||
let fanwei = fragNum;
|
||||
let audio = document.getElementsByTagName("audio");
|
||||
for (let i = 0; i < audio.length; i++) {
|
||||
if (
|
||||
audio[i].src.indexOf("boom") >= 0 &&
|
||||
(audio[i].paused || audio[i].ended)
|
||||
) {
|
||||
audio[i].play();
|
||||
break;
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < fragNum; i++) {
|
||||
if (style === 2) {
|
||||
color = {
|
||||
a: parseInt(getRandom(128, 255)),
|
||||
b: parseInt(getRandom(128, 255)),
|
||||
c: parseInt(getRandom(128, 255)),
|
||||
};
|
||||
}
|
||||
let a = getRandom(-Math.PI, Math.PI);
|
||||
let x = getRandom(0, fanwei) * Math.cos(a) + this.x;
|
||||
let y = getRandom(0, fanwei) * Math.sin(a) + this.y;
|
||||
let radius = getRandom(0, 2);
|
||||
let frag = new Frag(this.x, this.y, radius, color, x, y);
|
||||
this.booms.push(frag);
|
||||
}
|
||||
},
|
||||
_shapBoom: function () {
|
||||
let that = this;
|
||||
putValue(ocas, octx, this.shape, 5, function (dots) {
|
||||
let dx = canvas.width / 2 - that.x;
|
||||
let dy = canvas.height / 2 - that.y;
|
||||
for (let i = 0; i < dots.length; i++) {
|
||||
color = {a: dots[i].a, b: dots[i].b, c: dots[i].c};
|
||||
let x = dots[i].x;
|
||||
let y = dots[i].y;
|
||||
let radius = 1;
|
||||
let frag = new Frag(
|
||||
that.x,
|
||||
that.y,
|
||||
radius,
|
||||
color,
|
||||
x - dx,
|
||||
y - dy
|
||||
);
|
||||
that.booms.push(frag);
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
function putValue(canvas, context, ele, dr, callback) {
|
||||
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||
let img = new Image();
|
||||
if (ele.innerHTML.indexOf("img") >= 0) {
|
||||
img.src = ele.getElementsByTagName("img")[0].src;
|
||||
imgload(img, function () {
|
||||
context.drawImage(
|
||||
img,
|
||||
canvas.width / 2 - img.width / 2,
|
||||
canvas.height / 2 - img.width / 2
|
||||
);
|
||||
dots = getimgData(canvas, context, dr);
|
||||
callback(dots);
|
||||
});
|
||||
} else {
|
||||
let text = ele.innerHTML;
|
||||
context.save();
|
||||
let fontSize = 200;
|
||||
context.font = fontSize + "px 宋体 bold";
|
||||
context.textAlign = "center";
|
||||
context.textBaseline = "middle";
|
||||
context.fillStyle =
|
||||
"rgba(" +
|
||||
parseInt(getRandom(128, 255)) +
|
||||
"," +
|
||||
parseInt(getRandom(128, 255)) +
|
||||
"," +
|
||||
parseInt(getRandom(128, 255)) +
|
||||
" , 1)";
|
||||
context.fillText(text, canvas.width / 2, canvas.height / 2);
|
||||
context.restore();
|
||||
dots = getimgData(canvas, context, dr);
|
||||
callback(dots);
|
||||
}
|
||||
}
|
||||
|
||||
function imgload(img, callback) {
|
||||
if (img.complete) {
|
||||
callback.call(img);
|
||||
} else {
|
||||
img.onload = function () {
|
||||
callback.call(this);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function getimgData(canvas, context, dr) {
|
||||
let imgData = context.getImageData(0, 0, canvas.width, canvas.height);
|
||||
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||
let dots = [];
|
||||
for (let x = 0; x < imgData.width; x += dr) {
|
||||
for (let y = 0; y < imgData.height; y += dr) {
|
||||
let i = (y * imgData.width + x) * 4;
|
||||
if (imgData.data[i + 3] > 128) {
|
||||
let dot = {
|
||||
x: x,
|
||||
y: y,
|
||||
a: imgData.data[i],
|
||||
b: imgData.data[i + 1],
|
||||
c: imgData.data[i + 2],
|
||||
};
|
||||
dots.push(dot);
|
||||
}
|
||||
}
|
||||
}
|
||||
return dots;
|
||||
}
|
||||
|
||||
function getRandom(a, b) {
|
||||
return Math.random() * (b - a) + a;
|
||||
}
|
||||
|
||||
let maxRadius = 1,
|
||||
stars = [];
|
||||
|
||||
function drawBg() {
|
||||
for (let i = 0; i < 1000; i++) {
|
||||
let r = Math.random() * maxRadius;
|
||||
let x = Math.random() * canvas.width;
|
||||
let y = Math.random() * 2 * canvas.height - canvas.height;
|
||||
let star = new Star(x, y, r);
|
||||
stars.push(star);
|
||||
star.paint();
|
||||
}
|
||||
}
|
||||
|
||||
let Star = function (x, y, r) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.r = r;
|
||||
};
|
||||
Star.prototype = {
|
||||
paint: function () {
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = "rgba(255,255,255," + this.r + ")";
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
},
|
||||
};
|
||||
|
||||
let focallength = 250;
|
||||
let Frag = function (centerX, centerY, radius, color, tx, ty) {
|
||||
this.tx = tx;
|
||||
this.ty = ty;
|
||||
this.x = centerX;
|
||||
this.y = centerY;
|
||||
this.dead = false;
|
||||
this.centerX = centerX;
|
||||
this.centerY = centerY;
|
||||
this.radius = radius;
|
||||
this.color = color;
|
||||
};
|
||||
|
||||
Frag.prototype = {
|
||||
paint: function () {
|
||||
// ctx.beginPath();
|
||||
// ctx.arc(this.x , this.y , this.radius , 0 , 2*Math.PI);
|
||||
ctx.fillStyle =
|
||||
"rgba(" +
|
||||
this.color.a +
|
||||
"," +
|
||||
this.color.b +
|
||||
"," +
|
||||
this.color.c +
|
||||
",1)";
|
||||
ctx.fillRect(
|
||||
this.x - this.radius,
|
||||
this.y - this.radius,
|
||||
this.radius * 2,
|
||||
this.radius * 2
|
||||
);
|
||||
},
|
||||
moveTo: function (index) {
|
||||
this.ty = this.ty + 0.3;
|
||||
let dx = this.tx - this.x,
|
||||
dy = this.ty - this.y;
|
||||
this.x = Math.abs(dx) < 0.1 ? this.tx : this.x + dx * 0.1;
|
||||
this.y = Math.abs(dy) < 0.1 ? this.ty : this.y + dy * 0.1;
|
||||
if (dx === 0 && Math.abs(dy) <= 80) {
|
||||
this.dead = true;
|
||||
}
|
||||
this.paint();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,7 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
import Tooltip from "@/pages/pc/components/Tooltip.vue";
|
||||
import IconWrapper from "@/pages/pc/components/IconWrapper.vue";
|
||||
import {Icon} from "@iconify/vue";
|
||||
|
||||
defineProps<{
|
||||
|
||||
Reference in New Issue
Block a user