鼠标牵引的流光线条

最新推荐文章于 2025-06-03 19:54:30 发布

惠赢的

最新推荐文章于 2025-06-03 19:54:30 发布

阅读量206

点赞数 1

文章标签：计算机外设 java 前端

本文链接：https://blog.youkuaiyun.com/QQ1257871322/article/details/146779862

版权

<!DOCTYPE html>
<html>
<body style="background: #000; margin: 0; overflow: hidden">
<canvas id="canvas"></canvas>

<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 轨迹点数组
const trails = [];
let hue = 0; // 色相值（用于颜色变化）

class Trail {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.hue = hue; // 存储当前颜色
        this.radius = 5; // 初始半径
    }
}

// 鼠标移动监听
window.addEventListener('mousemove', (e) => {
    // 添加新的轨迹点
    trails.push(new Trail(e.clientX, e.clientY));
    // 保持轨迹长度不超过30个点
    if (trails.length > 30) trails.shift();
});

// 动态绘制
function animate() {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 循环处理每个轨迹点
    trails.forEach((trail, index) => {
        const next = trails[index + 1];
        if (next) {
            // 创建渐变连线
            const gradient = ctx.createLinearGradient(
                trail.x, trail.y, next.x, next.y
            );
            gradient.addColorStop(0, `hsl(${trail.hue}, 100%, 50%)`);
            gradient.addColorStop(1, `hsl(${next.hue}, 100%, 50%)`);

            // 绘制连线
            ctx.beginPath();
            ctx.lineWidth = trail.radius;
            ctx.strokeStyle = gradient;
            ctx.moveTo(trail.x, trail.y);
            ctx.lineTo(next.x, next.y);
            ctx.stroke();
        }

        // 动态变化属性
        trail.radius *= 0.95; // 逐渐缩小
        trail.hue += 2; // 颜色渐变
    });

    // 颜色循环
    hue = (hue + 1) % 360;
    requestAnimationFrame(animate);
}

animate();

// 窗口大小变化处理
window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});
</script>
</body>
</html>

效果特点：