Canvas彩色发光3D线条动画特效

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas彩色发光3D线条动画特效</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
        }
        
        canvas {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }
        
        .info {
            position: absolute;
            bottom: 20px;
            color: rgba(255, 255, 255, 0.5);
            text-align: center;
            width: 100%;
            z-index: 2;
            font-size: 14px;
        }
        
        .logo {
            position: absolute;
            top: 20px;
            left: 20px;
            color: white;
            z-index: 2;
            font-size: 18px;
            background: rgba(0, 0, 0, 0.5);
            padding: 10px 15px;
            border-radius: 5px;
        }
        
        .logo a {
            color: #4facfe;
            text-decoration: none;
        }
    </style>
</head>
<body>

    
    <canvas id="canvas"></canvas>
    
    <div class="info">
        彩色发光3D线条动画 - 鼠标移动可改变视角
    </div>

    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        
        // 设置canvas大小为窗口大小
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        
        // 鼠标位置
        let mouseX = 0;
        let mouseY = 0;
        
        // 线条配置
        const lines = [];
        const lineCount = 50;
        const maxDistance = 200;
        const colors = [
            '#FF5252', '#FF4081', '#E040FB', '#7C4DFF', 
            '#536DFE', '#448AFF', '#40C4FF', '#18FFFF', 
            '#64FFDA', '#69F0AE', '#B2FF59', '#EEFF41'
        ];
        
        // 3D点类
        class Point3D {
            constructor(x, y, z) {
                this.x = x;
                this.y = y;
                this.z = z;
                this.originX = x;
                this.originY = y;
                this.originZ = z;
            }
            
            // 旋转点
            rotate(angleX, angleY) {
                // 绕Y轴旋转
                let rotatedX = this.originX * Math.cos(angleY) - this.originZ * Math.sin(angleY);
                let rotatedZ = this.originX * Math.sin(angleY) + this.originZ * Math.cos(angleY);
                
                // 绕X轴旋转
                let rotatedY = this.originY * Math.cos(angleX) - rotatedZ * Math.sin(angleX);
                rotatedZ = this.originY * Math.sin(angleX) + rotatedZ * Math.cos(angleX);
                
                this.x = rotatedX;
                this.y = rotatedY;
                this.z = rotatedZ;
            }
            
            // 获取2D投影
            getProjection(fov, viewDistance) {
                const scale = fov / (fov + this.z + viewDistance);
                const x2d = this.x * scale + canvas.width / 2;
                const y2d = this.y * scale + canvas.height / 2;
                return { x: x2d, y: y2d, scale: scale };
            }
        }
        
        // 线条类
        class Line3D {
            constructor() {
                this.points = [];
                this.color = colors[Math.floor(Math.random() * colors.length)];
                this.speed = 0.01 + Math.random() * 0.02;
                this.angleX = 0;
                this.angleY = 0;
                this.init();
            }
            
            init() {
                const pointCount = 5;
                const spread = 100;
                
                for (let i = 0; i < pointCount; i++) {
                    const x = (Math.random() - 0.5) * spread;
                    const y = (Math.random() - 0.5) * spread;
                    const z = (Math.random() - 0.5) * spread;
                    this.points.push(new Point3D(x, y, z));
                }
            }
            
            update() {
                this.angleX += this.speed;
                this.angleY += this.speed * 0.7;
                
                for (let point of this.points) {
                    point.rotate(this.angleX, this.angleY);
                }
            }
            
            draw() {
                const projectedPoints = [];
                
                for (let point of this.points) {
                    const proj = point.getProjection(300, 500);
                    projectedPoints.push(proj);
                }
                
                // 绘制线条
                ctx.beginPath();
                ctx.moveTo(projectedPoints[0].x, projectedPoints[0].y);
                
                for (let i = 1; i < projectedPoints.length; i++) {
                    ctx.lineTo(projectedPoints[i].x, projectedPoints[i].y);
                }
                
                // 设置线条样式
                const gradient = ctx.createLinearGradient(
                    projectedPoints[0].x, projectedPoints[0].y,
                    projectedPoints[projectedPoints.length - 1].x, 
                    projectedPoints[projectedPoints.length - 1].y
                );
                
                gradient.addColorStop(0, this.color);
                gradient.addColorStop(1, 'rgba(255,255,255,0.8)');
                
                ctx.strokeStyle = gradient;
                ctx.lineWidth = 2 * projectedPoints[0].scale;
                ctx.lineCap = 'round';
                ctx.lineJoin = 'round';
                ctx.shadowBlur = 15 * projectedPoints[0].scale;
                ctx.shadowColor = this.color;
                ctx.stroke();
            }
        }
        
        // 初始化线条
        for (let i = 0; i < lineCount; i++) {
            lines.push(new Line3D());
        }
        
        // 鼠标移动事件
        window.addEventListener('mousemove', (e) => {
            mouseX = (e.clientX - canvas.width / 2) * 0.0005;
            mouseY = (e.clientY - canvas.height / 2) * 0.0005;
        });
        
        // 窗口大小调整
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });
        
        // 动画循环
        function animate() {
            ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            for (let line of lines) {
                line.update();
                line.draw();
            }
            
            requestAnimationFrame(animate);
        }
        
        animate();
    </script>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值