代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas鼠标滑过效果</title>
<style>
:root,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
canvas {
background-color: #000;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
/**@type{HTMLCanvasElement}*/
const canvas = document.getElementById('canvas')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
const ctx = canvas.getContext('2d')
const cirArr = []
function random(min, max) {
return Math.round(Math.random() * (max - min) + min)
}
function Circle(x, y, r, a, spx, spy) {
this.x = x
this.y = y
this.spx = (Math.random() - 0.5) * spx
this.spy = (Math.random() - 0.5) * spy
this.r = r
this.a = a
this.color = `rgba(${random(0,255)},${random(0,255)},${random(0,255)})`
}
Circle.prototype.draw = function () {
ctx.beginPath()
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2)
ctx.fillStyle = this.color
ctx.globalAlpha = this.a // 透明度
ctx.globalCompositeOperation = "lighter"
ctx.fill()
// ctx.stroke()
this.updata()
}
Circle.prototype.updata = function () {
this.a *= 0.98
this.x += this.spx
this.y += this.spy
}
// var cir = new Circle(300,300,20,1, 5, 5)
// cir.draw()
// console.log(cir)
canvas.onmousemove = function (e) {
var cir = new Circle(e.pageX, e.pageY, 20, 1, 5, 5)
cirArr.push(cir)
}
function init() {
ctx.clearRect(0, 0, canvas.width, canvas.height)
cirArr.forEach((item, i) => {
item.draw()
if (item.a < 0.05) cirArr.slice(i, 1);
})
requestAnimationFrame(init)
}
init()
</script>
</body>
</html>
效果