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

已于 2025-06-27 13:21:25 修改
阅读量442 收藏 7
点赞数 23
CC 4.0 BY-SA版权
文章标签： 前端 javascript 开发语言
于 2025-06-09 17:55:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148539820

<!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>

ziblog
关注
HTML Canvas绘制随机游动线条动画特效
MbMobile的博客
09-19 657
在本文中，我们将介绍如何使用HTML Canvas绘制一个随机游动线条的动画特效。通过使用JavaScript和Canvas API，我们可以创建一个具有随机移动效果的线条，为网页增添一些动感和视觉吸引力。通过使用Canvas API和JavaScript的动画循环，我们可以轻松地实现具有随机移动效果的线条动画。每一帧，线条的位置都会更新，并绘制出新的线段，形成了一个随机移动的线条效果。首先，我们需要在HTML文件中创建一个Canvas元素，用于绘制我们的动画。// 在这里编写JavaScript代码。
HTML5+Canvas实现的鼠标跟随自定义发光线条源码
专注于与编程相关的知识内容分享
01-16 2432
HTML5+Canvas实现的鼠标跟随自定义发光线条特效源码非常炫酷，在黑色的背景中，鼠标滑过即产生彩色变换的发光线条效果，且线条周围散发出火花飞射四溅的粒子光点特效。
鼠标牵引的流光线条
最新发布
QQ1257871322的博客
03-30 228
这个效果看起来像鼠标拖着一条会呼吸的霓虹灯带，适合作为网页的动态背景或光标特效。可以通过修改颜色算法（比如改用RGB）创造不同的视觉效果！颜色持续循环变化 (HSL色相轮换)鼠标移动时生成彩色流光轨迹。轨迹点之间用渐变色彩连接。轨迹会自动逐渐缩小消失。中的数值调整拖尾长度。
canvas多重阴影发光效果
netcy的专栏
01-18 3413
canvas多重阴影发光效果 前言 在一个项目中，客户提了一个发光的效果，效果图如下： 阴影 有的人可能会说，这个用阴影其实就可以实现。但是从图中可以看出，是一个比较强烈的发光效果。实际的应用过程中我们会发现用简单阴影参数实现的效果很难达到这样强烈的发光效果。 比如 ctx.shadowColor = 'rgba(255,0,0,1)'; ctx.shadowBlur =10; ctx.shadowOffsetX = 10; ctx.shadowOffsetY = 10; ctx.fil
[七夕节]——一款基于canvas绘制五颜六色线条合成一个爱心发光动画特效
LUZENG_SA的博客
08-02 2010
自己研究了了段时间h5得canvas，研究个小案例
canvas流光效果
zhuxiaolong1234的博客
06-12 686
【代码】canvas流光效果。
Canvas彩色发光3D线条动画特效.zip
10-08
【标题】"Canvas彩色发光3D线条动画特效.zip"是一个包含使用HTML5 Canvas技术实现的3D彩色发光线条动画效果的资源包。这种特效通常用于提升网页的视觉吸引力，为用户带来更生动、动态的浏览体验。Canvas是HTML5的一...
html5 canvas彩色流动线条动画特效
11-06
总结来说，实现HTML5 Canvas彩色流动线条动画特效，主要步骤包括：创建Canvas元素、获取2D渲染上下文、设置动画循环、在循环中绘制线条并应用时间相关的动态变化。通过不断探索和调整这些参数，你可以创建出更多富有...
HTML5 Canvas彩色发光线条波浪背景动画特效
06-11
在这个特定的实例中，“HTML5 Canvas彩色发光线条波浪背景动画特效”是一个利用Canvas API创建的视觉效果，其特点在于动态的线条、色彩变化以及波浪式的运动模式，为网页增添了一种现代和科技感。 首先，我们来深入...
彩色发光的3D线条动画特效
06-01
"彩色发光的3D线条动画特效"是一个利用这两个技术实现的创新视觉效果。这个特效通过在canvas元素上绘制动态的、全屏的彩色线条，为网页增添了引人入胜的3D动画效果。下面将详细探讨涉及的知识点。 1. **...
用 canvas 做个好玩的网站背景
dfpbut5000的博客
11-12 1221
　　不知不觉又好久没更过博客了，老调新弹一下，之前做的一个小效果，觉得蛮有意思的，也有朋友问是怎么做的，就分享一下，写个博文吧。 　　先上demo吧：http://whxaxes.github.io/canvas-test/src//Funny-demo/netparticle/net_1.html 　　上面这个demo是最早写的，后来做了点小修改后就用到了自己的网站上当个ban...
canvas——绘制曲线——挂钟，饼图，五角星
weixin_53596260的博客
07-24 419
canvas——弧形的绘制
canvas实现飞线流动效果
michael8512的博客
10-14 8984
这篇文章主要介绍如果用canvas实现固定坐标数组的飞线动画（折线），或者可以说是电流效果吧。 之前在网上有看到过流星托尾的效果，那种效果的主要方式是通过不断添加“蒙板”层的方式逐渐淡化前几秒的位置，而绘制的线其实就是一个小球，一直在移动。看起来是线，代码层面上其实只画了一个点。主要的代码为 ctx.fillStyle = 'rgba(0,0,0,0.1)';//这里颜色要与背景图的颜色一样...
canvas元素的内发光效果
热门推荐
zrzlj的专栏
10-08 1万+
我们知道使用CSS3可以实现阴影效果，box-shadow: 0px 0px 5px 5px black; 可以想象成是一个颜色为"black"的相同大小的阴影块在你要渲染的块的下面。     前面两个0px 0px的意思是阴影块的左上角位置与要渲染的块的偏移，可以为负数，第一个5px表示阴影块的模糊程度，数字越大越模糊，第二个5px表示阴影块往外辐射的距离，如果再后面加上inset, 写成,
【Canvas与艺术】五角星光芒四射的效果展示
一念非凡(46岁待业程序员)
03-30 1009
用Html5/Canvas 绘制五芒星光芒四射的效果
使用canvas制作一个圆形进度条
王铁柱666的博客
02-28 966
在前端开发中，使用HTML5的<canvas>元素来制作一个圆形进度条是一个常见的任务。
android canvas光晕绘制_Canvas实现贝赛尔曲线轨迹动画
weixin_36080939的博客
01-26 640
最近实现的下图的效果,跟大家分享一下假如我们要画下图曲线的动画如果每次都画一条短线连接起来,如下图被分成五段再看十段要是被分的段数足够多时每次画一段就很像曲线轨迹了二次贝赛尔曲线/*** 二次贝塞尔曲线动画* @param {Array} start 起点坐标* @param {Array} 曲度点坐标(也就是转弯的点,不是准确的坐标,只是大致的方向)* @param {Array} end...
探索HTML5 Canvas技术的3D线条动画特效
资源摘要信息: "HTML5 Canvas技术在实现彩色发光3D线条动画特效方面的应用" 在当今的网页设计与开发中，创建动画效果是增强用户体验的重要手段。HTML5 Canvas技术为我们提供了一个强大的平台，用于在网页上直接绘制...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值