在这篇文章中，我们将介绍如何使用HTML、CSS和JavaScript创建一个华丽的粒子艺术效果。这个效果通过随机移动的粒子和光影效果来营造出一个令人印象深刻的画面。你可以在Pengsirs的演示网站上亲自体验这个效果。
以下是实现这个粒子艺术效果的关键部分：
Canvas元素: 我们使用HTML的canvas元素来呈现粒子艺术。Canvas提供了一个绘制和操作图形的理想空间。
粒子生成: JavaScript代码生成了多个粒子。这些粒子具有不同的颜色、大小和运动轨迹。它们在画布上以随机的方式出现。
粒子运动: 每个粒子按照其独特的轨迹在画布上移动。它们的运动轨迹不断变化，形成了一个独特的动画效果。
颜色和光影: 粒子的颜色和光影效果是基于一系列参数的。你可以通过调整这些参数来改变颜色、光影的强度和效果。
在Pengsirs的演示网站上，你可以亲自观看这个粒子艺术效果。数十个粒子随机移动，它们的颜色和光影效果令人印象深刻。这个效果是通过随机性和数学运算相结合而产生的，使得每次观看都有独特的体验。
你可以将以上的HTML和JavaScript代码嵌入到你的网页中，以在你的网站上创建这个粒子艺术效果。确保你的网页引用了所需的JavaScript库，并在页面加载时触发动画。
<html><head>
<meta charset="UTF-8">
<meta name="google" value="notranslate">
<meta name="robots" content="noindex">
<title>51炫酷网-华丽的粒子艺术</title>
<style>
canvas { position: absolute; top: 0; left: 0; }
</style>
</head>
<body>
<canvas id="c" width="1920" height="572"></canvas>
<script>
var w = c.width = window.innerWidth,
h = c.height = window.innerHeight,
ctx = c.getContext('2d'),
opts = {
len: 20,
count: 50,
baseTime: 10,
addedTime: 10,
dieChance: .05,
spawnChance: 1,
sparkChance: .1,
sparkDist: 10,
sparkSize: 2,
color: 'hsl(hue,100%,light%)',
baseLight: 50,
addedLight: 10,
shadowToTimePropMult: 6,
baseLightInputMultiplier: .01,
addedLightInputMultiplier: .02,
cx: w / 2,
cy: h / 2,
repaintAlpha: .04,
hueChange: .1
},
tick = 0,
lines = [],
dieX = w / 2 / opts.len,
dieY = h / 2 / opts.len,
baseRad = Math.PI * 2 / 6;
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, w, h);
function loop() {
window.requestAnimationFrame(loop); ++tick;
ctx.globalCompositeOperation = 'source-over';
ctx.shadowBlur = 0;
ctx.fillStyle = 'rgba(0,0,0,alp)'.replace('alp', opts.repaintAlpha);
ctx.fillRect(0, 0, w, h);
ctx.globalCompositeOperation = 'lighter';
if (lines.length < opts.count && Math.random() < opts.spawnChance) lines.push(new Line);
lines.map(function(line) {
line.step()
})
}
function Line() {
this.reset()
}
Line.prototype.reset = function() {
this.x = 0;
this.y = 0;
this.addedX = 0;
this.addedY = 0;
this.rad = 0;
this.lightInputMultiplier = opts.baseLightInputMultiplier + opts.addedLightInputMultiplier * Math.random();
this.color = opts.color.replace('hue', tick * opts.hueChange);
this.cumulativeTime = 0;
this.beginPhase()
}
Line.prototype.beginPhase = function() {
this.x += this.addedX;
this.y += this.addedY;
this.time = 0;
this.targetTime = (opts.baseTime + opts.addedTime * Math.random()) | 0;
this.rad += baseRad * (Math.random() < .5 ? 1 : -1);
this.addedX = Math.cos(this.rad);
this.addedY = Math.sin(this.rad);
if (Math.random() < opts.dieChance || this.x > dieX || this.x < -dieX || this.y > dieY || this.y < -dieY) this.reset()
}
Line.prototype.step = function() {++this.time; ++this.cumulativeTime;
if (this.time >= this.targetTime) this.beginPhase();
var prop = this.time / this.targetTime,
wave = Math.sin(prop * Math.PI / 2),
x = this.addedX * wave,
y = this.addedY * wave;
ctx.shadowBlur = prop * opts.shadowToTimePropMult;
ctx.fillStyle = ctx.shadowColor = this.color.replace('light', opts.baseLight + opts.addedLight * Math.sin(this.cumulativeTime * this.lightInputMultiplier));
ctx.fillRect(opts.cx + (this.x + x) * opts.len, opts.cy + (this.y + y) * opts.len, 2, 2);
if (Math.random() < opts.sparkChance) ctx.fillRect(opts.cx + (this.x + x) * opts.len + Math.random() * opts.sparkDist * (Math.random() < .5 ? 1 : -1) - opts.sparkSize / 2, opts.cy + (this.y + y) * opts.len + Math.random() * opts.sparkDist * (Math.random() < .5 ? 1 : -1) - opts.sparkSize / 2, opts.sparkSize, opts.sparkSize)
}
loop();
window.addEventListener('resize',
function() {
w = c.width = window.innerWidth;
h = c.height = window.innerHeight;
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, w, h);
opts.cx = w / 2;
opts.cy = h / 2;
dieX = w / 2 / opts.len;
dieY = h / 2 / opts.len
});
</script>
</body>
</html>这个粒子艺术效果展示了HTML、CSS和JavaScript的强大之处，它们可以用来创造引人注目的视觉效果。不同的参数和数学运算可以产生各种独特的艺术效果，为你的网站增加创意和吸引力。立即在你的网站上尝试这个粒子艺术，让访问者留下深刻的印象。
