附上代码
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>粒子拖动动画</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
#canvas {
background-color: #000000;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script src="./index.js"></script>
</html>
Javascript
/** @type {HTMLCanvasElement} */
const can = document.getElementById("canvas");
can.width = window.innerWidth;
can.height = window.innerHeight;
const ctx = can.getContext("2d");
const m = {
x: can.width / 2,
y: can.height / 2,
};
const array = [];
function init() {
for (let index = 0; index < 100; index++) {
array.push(new item(can.width, can.height));
}
}
class item {
constructor(x, y) {
// 位置
this.x = x;
this.y = y;
this.angle = Math.PI * 2 * Math.random();
this.radius = Math.random() * 100;
this.color = `hsl(${Math.random() * 360},50%,50%)`;
// 绘画
this.draw = function () {
ctx.beginPath();
ctx.strokeStyle = this.color;
ctx.moveTo(this.x, this.y);
this.angle += 0.01;
this.x = m.x + Math.cos(this.angle) * this.radius;
this.y = m.y + Math.sin(this.angle) * this.radius;
ctx.lineTo(this.x, this.y);
ctx.lineWidth = 5;
ctx.stroke();
ctx.closePath();
};
}
}
function animate() {
requestAnimationFrame(animate);
console.log(new Date().getTime());
ctx.fillStyle = "rgba(0,0,0,0.05)";
ctx.fillRect(0, 0, can.width, can.height);
array.forEach((value) => {
value.draw();
});
}
animate();
window.onmousemove = function (e) {
m.x = e.clientX;
m.y = e.clientY;
};
init();
canvas 学习作业小 Demo 已完成