HTML点击鼠标动态特效，屏幕生成特效火花特效

YCY^v^2023-11-30 9:33
效果视频：
火花视频html+js
直接上代码：
html 复制代码
<!DOCTYPE html>
<html>
<head>
	<title>Mouse Click Effect</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #000;
		}
		canvas {
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		var canvas = document.getElementById("canvas");
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		var ctx = canvas.getContext("2d");
		var particles = [];
		var particleCount = 100;
		var particleRadius = 3;
		var colors = ["#f44336", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5", "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#4caf50", "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107", "#ff9800", "#ff5722", "#795548", "#9e9e9e", "#607d8b"];
		canvas.addEventListener("mousedown", function(e) {
			for (var i = 0; i < particleCount; i++) {
				particles.push(new createParticle(e.clientX, e.clientY));
			}
		});
		function createParticle(x, y) {
			this.x = x;
			this.y = y;
			this.vx = Math.random() * 10 - 5;
			this.vy = Math.random() * 10 - 5;
			this.color = colors[Math.floor(Math.random() * colors.length)];
			this.radius = particleRadius;
			this.alpha = 1;
			this.draw = function() {
				ctx.globalAlpha = this.alpha;
				ctx.beginPath();
				ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
				ctx.fillStyle = this.color;
				ctx.fill();
			}
		}
		function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			for (var i = 0; i < particles.length; i++) {
				particles[i].x += particles[i].vx;
				particles[i].y += particles[i].vy;
				particles[i].alpha -= 0.01;
				if (particles[i].alpha <= 0) {
					particles.splice(i, 1);
				} else {
					particles[i].draw();
				}
			}
			requestAnimationFrame(draw);
		}
		draw();
	</script>
</body>
</html>