鼠标吸附彩色气泡

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

效果演示
在这里插入图片描述
看了如此效果是不是心动的感觉呢？？？

代码展示

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