1.组件1
import React, { useCallback } from "react";
import { Particles } from "react-tsparticles";
import { loadFull } from "tsparticles";
const StarField = () => {
const particlesInit = useCallback(async (engine) => {
console.log(engine);
await loadFull(engine);
}, []);
const particlesLoaded = useCallback(async (container) => {
console.log(container);
}, []);
return (
<div style={{ position: "relative", width: "100%", height: "100%" }}>
<Particles
id="tsparticles"
init={particlesInit}
loaded={particlesLoaded}
options={{
background: {
color: {
value: "#000",
},
},
fpsLimit: 100,
interactivity: {
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "repulse",
},
resize: true,
},
modes: {
push: {
quantity: 5,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color: {
value: "#ffffff",
},
links: {
color: "#ffffff",
distance: 150,
enable: true,
opacity: 0.5,
width: 1,
},
collisions: {
enable: true,
},
move: {
direction: "none",
enable: true,
outModes: {
default: "bounce",
},
random: false,
speed: 7,
straight: false,
},
number: {
density: {
enable: true,
area: 800,
},
value: 85,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
value: { min: 1, max: 4 },
},
},
detectRetina: true,
}}
/>
</div>
);
};
export default StarField;
2.组件2
import React from "react";
import { Particles } from "react-tsparticles";
const StarField = () => {
return (
<div style={{ position: "relative", width: "100%", height: "100%" }}>
<Particles
id="tsparticles"
options={{
background: {
color: {
value: "#000000",
},
},
particles: {
number: {
value: 100, // 调整这个值来控制星星数量
},
shape: {
type: "circle",
},
size: {
value: 2,
},
opacity: {
value: 0.7,
},
move: {
enable: true,
speed: 0.5,
},
},
}}
/>
</div>
);
};
export default StarField;
3. 组件3
import React, { Children, useEffect, useRef, useState } from 'react';
import { useIsPC } from '~/utils';
interface Star {
orbitRadius: number;
radius: number;
orbitX: number;
orbitY: number;
timePassed: number;
speed: number;
alpha: number;
}
interface SkyProps {
children: React.ReactNode;
}
const StarField = (prop:any) => {
const canvasRef = useRef<HTMLCanvasElement | null>(null);
const [ctx,setctx]=useState<any>();
const isPC = useIsPC();
useEffect(() => {
info();
}, [prop.pageName]);
const info=()=>{
const canvas = canvasRef.current;
const ctx = canvas?.getContext('2d');
if (!canvas || !ctx) {
return;
}
console.log(isPC);
setctx(ctx);
const w = (canvas.width = window.innerWidth);
const h = canvas.height = window.innerHeight; // 适配高度
const hue = 217;
const stars: Star[] = [];
const count = 0;
const maxStars = 1000;
const canvas2 = document.createElement('canvas');
const ctx2 = canvas2.getContext('2d')!;
canvas2.width = 100;
canvas2.height = 100;
const half = canvas2.width / 2;
const gradient2 = ctx2.createRadialGradient(
half,
half,
0,
half,
half,
half
);
gradient2.addColorStop(0.025, '#fff');
gradient2.addColorStop(0.1, `hsl(${hue}, 61%, 33%)`);
gradient2.addColorStop(0.25, `hsl(${hue}, 64%, 6%)`);
gradient2.addColorStop(1, 'transparent');
ctx2.fillStyle = gradient2;
ctx2.beginPath();
ctx2.arc(half, half, half, 0, Math.PI * 2);
ctx2.fill();
function random(min: number, max: number): number {
if (arguments.length < 2) {
max = min;
min = 0;
}
if (min > max) {
const hold = max;
max = min;
min = hold;
}
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function maxOrbit(x: number, y: number): number {
const max = Math.max(x, y);
const diameter = Math.round(Math.sqrt(max * max + max * max));
return diameter / 2;
}
class Star {
orbitRadius: number;
radius: number;
orbitX: number;
orbitY: number;
timePassed: number;
speed: number;
alpha: number;
constructor() {
this.orbitRadius = random(0, maxOrbit(w, h));
this.radius = random(60, this.orbitRadius) / 12;
this.orbitX = w / 2;
this.orbitY = h / 2;
this.timePassed = random(0, maxStars);
this.speed = 0;//random(0, this.orbitRadius) / 500000 速度
this.alpha = random(2, 10) / 10;
stars.push(this);
}
draw() {
const x =
Math.sin(this.timePassed) * this.orbitRadius + this.orbitX;
const y =
Math.cos(this.timePassed) * this.orbitRadius + this.orbitY;
const twinkle = random(0, 10);
if (twinkle === 1 && this.alpha > 0) {
this.alpha -= 0.05;
} else if (twinkle === 2 && this.alpha < 1) {
this.alpha += 0.05;
}
if (ctx) {
ctx.globalAlpha = this.alpha;
ctx.drawImage(
canvas2,
x - this.radius / 2,
y - this.radius / 2,
this.radius,
this.radius
);
}
this.timePassed += this.speed;
}
}
for (let i = 0; i < maxStars; i++) {
new Star();
}
function animation() {
if (ctx) {
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = 0.8;
ctx.fillStyle = `hsla(${hue}, 64%, 6%, 1)`;
ctx.fillRect(0, 0, w, h);
ctx.globalCompositeOperation = 'lighter';
}
for (let i = 1, l = stars.length; i < l; i++) {
stars[i].draw();
}
window.requestAnimationFrame(animation);
}
animation();
}
return (
<div className=' '>
<canvas id="canvas" ref={canvasRef} className=' relative '>
</canvas>
</div>
)
;
};
export default StarField;
4. js
"use strict";
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
w = canvas.width = window.innerWidth,
h = canvas.height = window.innerHeight,
hue = 217,
stars = [],
count = 0,
maxStars = 1400;
var canvas2 = document.createElement('canvas'),
ctx2 = canvas2.getContext('2d');
canvas2.width = 100;
canvas2.height = 100;
var half = canvas2.width/2,
gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
gradient2.addColorStop(0.025, '#fff');
gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
gradient2.addColorStop(1, 'transparent');
ctx2.fillStyle = gradient2;
ctx2.beginPath();
ctx2.arc(half, half, half, 0, Math.PI * 2);
ctx2.fill();
// End cache
function random(min, max) {
if (arguments.length < 2) {
max = min;
min = 0;
}
if (min > max) {
var hold = max;
max = min;
min = hold;
}
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function maxOrbit(x,y) {
var max = Math.max(x,y),
diameter = Math.round(Math.sqrt(max*max + max*max));
return diameter/2;
}
var Star = function() {
this.orbitRadius = random(maxOrbit(w,h));
this.radius = random(60, this.orbitRadius) / 12;
this.orbitX = w / 2;
this.orbitY = h / 2;
this.timePassed = random(0, maxStars);
this.speed = random(this.orbitRadius) / 500000;
this.alpha = random(2, 10) / 10;
count++;
stars[count] = this;
}
Star.prototype.draw = function() {
var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
twinkle = random(10);
if (twinkle === 1 && this.alpha > 0) {
this.alpha -= 0.05;
} else if (twinkle === 2 && this.alpha < 1) {
this.alpha += 0.05;
}
ctx.globalAlpha = this.alpha;
ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
this.timePassed += this.speed;
}
for (var i = 0; i < maxStars; i++) {
new Star();
}
function animation() {
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = 0.8;
ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 1)';
ctx.fillRect(0, 0, w, h)
ctx.globalCompositeOperation = 'lighter';
for (var i = 1, l = stars.length; i < l; i++) {
stars[i].draw();
};
window.requestAnimationFrame(animation);
}
animation();