鼠标吸附彩色气泡

H5Cavas制作鼠标吸附彩色气泡。当鼠标在屏幕上移动的时候,鼠标划过的区域会出现许多彩色气泡,并且会自动消失。

效果演示
鼠标吸附彩色气泡_第1张图片
看了如此效果是不是心动的感觉呢???

代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>鼠标吸附彩色气泡</title>

		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				overflow: hidden;
			}

			#part {
				background-color: black;
			}
		</style>

	</head>
	<body>

		<canvas id="part"></canvas>

	</body>

	<script>
		var canvas = document.querySelector('#part');
		var ctx = canvas.getContext("2d");
		var starlist = [];

		function init() {
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
		}
		init();
		window.onresize = init;

		canvas.addEventListener('mousemove', function(e) {
			starlist.push(new Star(e.offsetX, e.offsetY));
			console.log(starlist)
		})

		function random(min, max) {
			return Math.floor((max - min) * Math.random() + min);
		}

		function Star(x, y) {
			this.x = x;
			this.y = y;
			this.vx = (Math.random() - 0.5) * 2;
			this.vy = (Math.random() - 0.5) * 2;
			this.color = 'rgb(' + random(0, 256) + ',' + random(0, 256) + ',' + random(0, 256) + ')';
			this.a = 1;
			console.log(this.color);
			this.draw();
		}
		Star.prototype = {
			draw: function() {
				ctx.beginPath();
				ctx.fillStyle = this.color;
				ctx.globalCompositeOperation = 'lighter'
				ctx.globalAlpha = this.a;
				ctx.arc(this.x, this.y, 30, 0, Math.PI * 2, false);
				ctx.fill();
				this.updata();
			},
			updata() {
				this.x += this.vx;
				this.y += this.vy;
				this.a *= 0.98;
			}
		}
		console.log(new Star(100, 150));

		function render() {
			ctx.clearRect(0, 0, canvas.width, canvas.height)

			starlist.forEach((item, i) => {
				item.draw();
				if (item.a < 0.05) {
					starlist.splice(i, 1);
				}
			})

			requestAnimationFrame(render);
		}
		render();
	</script>

</html>

此效果能否激起你内心对Cavas的热爱呢???

了解更多关注我哟!!!

你可能感兴趣的:(H5,JavaScript)