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

最新推荐文章于 2024-06-16 12:02:56 发布

YCY^v^

最新推荐文章于 2024-06-16 12:02:56 发布

阅读量1.1k

点赞数 18

分类专栏：笔记前端文章标签： html 前端

本文链接：https://blog.csdn.net/chenyu_Yang/article/details/134617806

版权

笔记同时被 2 个专栏收录

78 篇文章 3 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

效果视频：

火花视频html+js

直接上代码：

<!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>