鼠标吸附彩色气泡
程序员文章站
2022-07-05 20:39:45
...
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>
此效果能否激起你内心对Cavas的热爱呢？？？
了解更多关注我哟！！！