几何图形发光变换特效

原创 已于 2025-06-27 13:11:27 修改 · 885 阅读 · 17 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #javascript #前端

于 2025-06-12 13:31:12 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>几何图形发光变换特效</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: #000;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Arial', sans-serif;
        }
        
        canvas {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1;
        }
        
        .content {
            position: relative;
            z-index: 2;
            text-align: center;
            color: white;
            padding: 20px;
            max-width: 800px;
        }
        
        h1 {
            font-size: 3em;
            margin-bottom: 20px;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
        }
        
        p {
            font-size: 1.2em;
            margin-bottom: 30px;
            line-height: 1.6;
        }
        
        .link {
            margin-top: 40px;
        }
        
        a {
            color: #fff;
            text-decoration: none;
            font-size: 1.2em;
            padding: 12px 25px;
            border: 2px solid rgba(255, 255, 255, 0.5);
            border-radius: 30px;
            background: rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
            display: inline-block;
        }
        
        a:hover {
            background: rgba(255, 255, 255, 0.3);
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
            transform: translateY(-3px);
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    
    <div class="content">
        <h1>几何图形发光变换</h1>
        <p>体验动态几何图形的奇妙变换，感受光与形的完美结合</p>

    </div>

    <script>
        // 初始化画布
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        
        // 设置画布大小为窗口大小
        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        
        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();
        
        // 几何图形参数
        const shapes = [];
        const shapeCount = 15;
        const colors = [
            'rgba(255, 100, 100, 0.7)',
            'rgba(100, 255, 100, 0.7)',
            'rgba(100, 100, 255, 0.7)',
            'rgba(255, 255, 100, 0.7)',
            'rgba(100, 255, 255, 0.7)',
            'rgba(255, 100, 255, 0.7)'
        ];
        
        // 初始化图形
        function initShapes() {
            for (let i = 0; i < shapeCount; i++) {
                shapes.push({
                    x: Math.random() * canvas.width,
                    y: Math.random() * canvas.height,
                    size: 30 + Math.random() * 70,
                    rotation: Math.random() * Math.PI * 2,
                    rotationSpeed: (Math.random() - 0.5) * 0.02,
                    color: colors[Math.floor(Math.random() * colors.length)],
                    sides: 3 + Math.floor(Math.random() * 5), // 3-7边形
                    targetSides: 3 + Math.floor(Math.random() * 5),
                    sideChangeSpeed: 0.005 + Math.random() * 0.005,
                    glow: 0,
                    pulseSpeed: 0.01 + Math.random() * 0.02,
                    moveX: (Math.random() - 0.5) * 2,
                    moveY: (Math.random() - 0.5) * 2
                });
            }
        }
        
        // 绘制多边形
        function drawPolygon(x, y, radius, sides, rotation) {
            ctx.beginPath();
            for (let i = 0; i < sides; i++) {
                const angle = rotation + (i * 2 * Math.PI / sides);
                const px = x + Math.cos(angle) * radius;
                const py = y + Math.sin(angle) * radius;
                if (i === 0) {
                    ctx.moveTo(px, py);
                } else {
                    ctx.lineTo(px, py);
                }
            }
            ctx.closePath();
        }
        
        // 动画循环
        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 绘制所有图形
            shapes.forEach(shape => {
                // 更新位置
                shape.x += shape.moveX;
                shape.y += shape.moveY;
                
                // 边界检查
                if (shape.x < 0 || shape.x > canvas.width) shape.moveX *= -1;
                if (shape.y < 0 || shape.y > canvas.height) shape.moveY *= -1;
                
                // 更新旋转
                shape.rotation += shape.rotationSpeed;
                
                // 更新边数变换
                if (Math.abs(shape.sides - shape.targetSides) < 0.1) {
                    shape.targetSides = 3 + Math.floor(Math.random() * 5);
                }
                
                if (shape.sides < shape.targetSides) {
                    shape.sides += shape.sideChangeSpeed;
                } else if (shape.sides > shape.targetSides) {
                    shape.sides -= shape.sideChangeSpeed;
                }
                
                // 更新发光效果
                shape.glow += shape.pulseSpeed;
                if (shape.glow > 1 || shape.glow < 0) {
                    shape.pulseSpeed *= -1;
                }
                
                // 绘制图形
                ctx.save();
                
                // 绘制发光效果
                const glowSize = shape.size * (1 + shape.glow * 0.3);
                const gradient = ctx.createRadialGradient(
                    shape.x, shape.y, 0,
                    shape.x, shape.y, glowSize
                );
                gradient.addColorStop(0, shape.color);
                gradient.addColorStop(1, 'rgba(0,0,0,0)');
                
                ctx.fillStyle = gradient;
                drawPolygon(shape.x, shape.y, glowSize, shape.sides, shape.rotation);
                ctx.fill();
                
                // 绘制图形主体
                ctx.fillStyle = shape.color;
                drawPolygon(shape.x, shape.y, shape.size, shape.sides, shape.rotation);
                ctx.fill();
                
                ctx.restore();
            });
            
            requestAnimationFrame(animate);
        }
        
        // 启动动画
        initShapes();
        animate();
    </script>
</body>
</html>

ziblog
关注
GAMES101 梳理 / 个人向图形学笔记
qq_39006214的博客
04-06 7982
矩阵变换 Lecture2 线性代数 Lecture3-4 坐标变换 1、二维的坐标变化 2、三维的坐标变化 矩阵相乘的顺序是从右往左，矩阵变换的顺序应该是——旋转、缩放、平移。 为什么引入齐次坐标 不引入齐次坐标，类似斜切等 为什么引入齐次坐标？ 为了用一个矩阵就可以表示矩阵的变换 ...
21、JavaFX 特效添加指南
sat99的博客
07-08 55
本文介绍了如何在 JavaFX 中添加各种特效，包括阴影、反射、模糊、绽放、发光以及透视效果，并探讨了如何组合这些特效以实现更丰富的视觉效果。通过示例代码，帮助开发者快速掌握特效的使用方法及其在不同场景中的应用。
23、计算机图形中的光照、特效与虚拟现实技术
fanta的博客
11-14 13
本文深入探讨了计算机图形学中的核心内容，包括光照与着色、虚拟现实技术、雾效模拟以及粒子系统的实现。通过Java 3D的实例练习，详细介绍了聚光灯设置、镜面反射计算、纹理与背景应用等关键技术。对比分析了线性雾、指数雾和粒子系统在视觉效果与性能上的差异，并展示了虚拟现实中用户交互的实现流程。最后提出一个融合光照、雾效、粒子动画与交互功能的森林场景综合案例，展现了多种图形技术协同构建逼真虚拟环境的应用方法。
深入探索 Shader：图形渲染的魔法代码
m0_57836225的博客
03-31 1425
Shader 本质上是一种运行在图形处理器（GPU）上的小程序，它的主要任务是处理图形渲染过程中的特定计算。与传统的 CPU 程序不同，Shader 专门针对图形处理进行了优化，能够高效地并行处理大量的数据，从而大大提高图形渲染的速度和质量。Shader 是计算机图形学中不可或缺的一部分，它为图形渲染带来了强大的计算能力和丰富的创意空间。通过理解 Shader 的基本概念、工作原理和常见类型，并结合具体的代码示例进行实践，您可以更好地掌握 Shader 编程，创造出令人惊叹的图形效果。
24、XNA 3D 渲染特效与技巧深度解析
mmm90的博客
10-19 15
本文深入解析了XNA中的多种3D渲染特效及其应用技巧，涵盖精灵尘粒子效果的实现、AlphaTestEffect在透明度处理中的应用、DualTextureEffect的双纹理混合技术，以及EnvironmentMapEffect对环境反射的模拟。文章详细介绍了各特效的功能特性、使用场景、属性配置及实现步骤，并通过对比表格和代码示例帮助开发者理解不同特效的能力差异。这些技术为提升游戏视觉表现力提供了实用解决方案。
Manim实现图像变形特效
weixin_40212832的博客
06-12 34
使用Manim的Transform和实现数学图形动态变形。比如，圆变方、正弦函数振幅连续变化等等，结合颜色插值与参数数值同步更新，直观演示参数对图形的影响。原创作者: wang_yb转载于: https://www.cnblogs.com/wang_yb/p/189018221.manim边学边做--三维图形的场景类03-162.【manim动画教程】-- 安装2023-03-283.【manim动画教程】-- 基本图形2023-03-29。
计算机图形学导论
热门推荐
papalqi
10-12 1万+
一.计算机图形学概念 1.1什么是计算机图形学？（Computer Graphics） 关于计算机图形学的定义众说纷纭。 IEEE 对计算机图形学的定义为：Computer graphicsis the art or science of producing graphical images with the aid of computer。 国际标准化组织 ISO 将计算机图形学定...
超详细——手把手教你用threejs实现一个酷炫的模型发光扫描效果（二）
qq27229639的博客
06-07 4476
上篇文章搭建了一个基本的3d场景，本篇则主要完成模型效果的开发，包括：模型外边缘线框，扫描线框，通过这两步实现整个项目的核心效果。
WPF-画刷、绘图、几何绘图、图形的效果与滤镜、图形变换和动画
张金乙的专栏
12-30 7080
本篇将记录一下如何在WPF中绘画和设计动画，这方面一直都不是VS的强项，然而它有一套利器Blend；这方面也不是我的优势，幸好我有博客园，能记录一下学习的过程。在本记录中，为了更好的理解绘画与动画，多数的例子还是在VS里面敲出来的。好了，不废话了，现在开始。 一、WPF绘画 1.1基本图形 　　在WPF中可以绘制矢量图，不会随窗口或图型的放大或缩小出现锯齿或变形，除此之外，XAM
几何图形发光变换HTML5特效特效代码
03-20
几何图形发光变换特效是利用HTML5 Canvas元素和JavaScript编程实现的。Canvas是一个二维绘图上下文，允许开发者通过JavaScript脚本在网页上绘制图形。在这个特效中，主要涉及以下关键技术点： 1. **Canvas基础**：...
精选资源
几何图形发光变换HTML5特效
07-24
"几何图形发光变换HTML5特效"正是一款能够提升网页互动性和视觉吸引力的技术应用。这个特效利用HTML5的Canvas API来绘制和操纵多种几何图形，实现3D旋转、放大缩小等动画效果，为背景增添生动且引人入胜的动态元素。...
几何图形发光变换HTML5特效.zip
10-15
【标题】"几何图形发光变换HTML5特效.zip"所包含的知识点主要集中在使用HTML5、CSS3以及jQuery来实现动态的几何图形发光变换效果。这是一个常见的网页特效，用于提升网站的视觉吸引力和用户体验。 首先，HTML5是...
CSS 面试题
d81895606的博客
12-03 353
API类型特点微任务最常用，立即执行微任务现代API，推荐使用宏任务最小延迟，让出控制权宏任务Node.js特有，I/O后执行伪宏任务下一帧前，适合动画宏任务高优先级，比setTimeout快Node.js特快比微任务还快。
CSS 网页布局：技术基础与实践技巧
csbysj2020的博客
12-02 952
CSS网页布局是前端开发中的核心技术之一，掌握CSS布局的基础知识和实践技巧对于成为一名优秀的前端开发者至关重要。本文介绍了CSS布局的基础知识、布局模型、实践技巧以及响应式布局，希望对读者有所帮助。
【JavaWeb】CSS_三种引入方式
qq_43494013的博客
12-05 426
【JavaWeb】CSS_三种引入方式
DevUI主题系统进阶：CSS-in-JS与暗黑模式无缝切换架构
m0_37613794的博客
12-04 823
本文深入解析了华为DevUI主题系统的混合架构实现方案，提出结合CSS-in-JS灵活性与CSS Variables性能优势的创新设计。核心内容包括：1）主题令牌管理算法，实现语义化到具体值的映射；2）运行时主题切换引擎，支持平滑过渡和状态持久化；3）性能优化策略，包括CSS变量作用域隔离和编译时优化。通过MateChat等大型项目验证，该方案显著提升了主题定制能力，使主题切换时间从300ms降至28ms，样式文件体积减少73%。文章还提供了从原理到实践的全套解决方案，包括React集成、组件适配和常见问题
Day4-6 CSS 进阶 + JS 基础 —— 实现 “交互效果 + 样式复用”（对标职场 “组件化思维” 入门）
2402_87628679的博客
12-04 654
能封装 CSS 通用组件（基础类 + 差异化类），实现样式复用和统一；能通过 JS 实现 “点击、输入” 等基础交互，理解 “事件驱动” 逻辑；掌握 DOM 选择器、事件绑定、DOM 修改的核心用法，能独立完成弹窗、表单验证等常见需求；完成作业：基于本文代码，添加 “注册弹窗”，实现 “点击注册→显示注册表单→验证手机号格式（11 位数字）→提交成功提示”，并提交到 GitHub（练习代码版本管理）。
css使用grid布局实现网格(表格)，动态调整行高，列宽，整体缩放，插入行，列，删除行，列
最新发布
qq_41505416的博客
12-07 220
摘要：本文演示了使用React和CSS Grid布局实现动态表格功能，包括单元格合并/取消合并、行列调整（高度/宽度）、整体缩放、行列插入（任意位置或末尾）、删除行列等操作。表格支持自适应容器，可实现等宽等高显示。通过Grid布局的灵活特性，实现了复杂的表格交互功能，相比传统table布局更具响应性和可控性。视频演示展示了完整的操作流程和效果。（135字）
CSS Animation 详解
Irene1991的博客
12-04 873
本文全面介绍了CSS动画技术，包括基础概念、关键帧规则、动画属性详解及实践示例。主要内容涵盖：1. 核心概念：关键帧(@keyframes)定义动画序列，动画属性控制行为；2. 详细解析8大动画属性及其应用场景；3. 提供加载动画、呼吸灯等5种典型实现示例；4. 性能优化技巧，如使用GPU加速属性；5. 响应式设计方法，包括媒体查询和CSS变量应用；6. 高级技巧如动画事件监听和状态控制；7. 常见问题解决方案和浏览器兼容性处理。文章强调遵循性能最佳实践和可访问性原则，适合开发者系统学习CSS动画技术。
HTML5 Canvas实现几何图形发光变换动画特效
本资源介绍的是一种基于HTML5 Canvas元素实现的几何图形发光变换特效代码，其特点是利用了Canvas的绘图能力，结合JavaScript脚本，实现了几何图形的动态效果，包括3D旋转、放大缩小以及发光效果。 几何图形在图形学...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值