Canvas图形密集动画特效

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

#css #前端

于 2025-06-16 15:58:33 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas图形密集动画特效</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: fixed;
            top: 0;
            left: 0;
            z-index: 1;
        }
        
        .controls {
            position: fixed;
            bottom: 20px;
            left: 20px;
            z-index: 2;
            display: flex;
            gap: 10px;
        }
        
        button {
            padding: 8px 15px;
            background: rgba(255,255,255,0.1);
            color: white;
            border: 1px solid rgba(255,255,255,0.3);
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        button:hover {
            background: rgba(255,255,255,0.2);
        }
        
        /* 插入的链接样式 */
        .custom-link {
            position: fixed;
            bottom: 20px;
            right: 20px;
            color: rgba(255,255,255,0.7);
            text-decoration: none;
            font-size: 14px;
            background: rgba(0,0,0,0.3);
            padding: 8px 15px;
            border-radius: 20px;
            z-index: 10;
            transition: all 0.3s ease;
        }
        
        .custom-link:hover {
            color: white;
            background: rgba(0,0,0,0.5);
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    
    <div class="controls">
        <button id="addShapes">增加图形</button>
        <button id="changePattern">变换模式</button>
    </div>
    

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const canvas = document.getElementById('canvas');
            const ctx = canvas.getContext('2d');
            const addBtn = document.getElementById('addShapes');
            const changeBtn = document.getElementById('changePattern');
            
            // 设置canvas尺寸为窗口大小
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            
            // 图形数组
            let shapes = [];
            let patternType = 1;
            const colors = [
                '#FF5252', '#FF4081', '#E040FB', 
                '#7C4DFF', '#536DFE', '#448AFF',
                '#40C4FF', '#18FFFF', '#64FFDA',
                '#69F0AE', '#B2FF59', '#EEFF41',
                '#FFFF00', '#FFD740', '#FFAB40'
            ];
            
            // 图形类
            class Shape {
                constructor(type) {
                    this.type = type;
                    this.x = Math.random() * canvas.width;
                    this.y = Math.random() * canvas.height;
                    this.size = Math.random() * 30 + 10;
                    this.color = colors[Math.floor(Math.random() * colors.length)];
                    this.speedX = Math.random() * 2 - 1;
                    this.speedY = Math.random() * 2 - 1;
                    this.rotation = Math.random() * Math.PI * 2;
                    this.rotationSpeed = Math.random() * 0.02 - 0.01;
                    this.points = this.generatePoints();
                }
                
                generatePoints() {
                    const points = [];
                    const sides = this.type === 1 ? Math.floor(Math.random() * 3) + 3 : 
                                  this.type === 2 ? Math.floor(Math.random() * 4) + 4 : 
                                  Math.floor(Math.random() * 5) + 5;
                    
                    for (let i = 0; i < sides; i++) {
                        const angle = i * (Math.PI * 2 / sides);
                        const distance = this.size * (0.8 + Math.random() * 0.4);
                        points.push({
                            x: Math.cos(angle) * distance,
                            y: Math.sin(angle) * distance
                        });
                    }
                    
                    return points;
                }
                
                update() {
                    this.x += this.speedX;
                    this.y += this.speedY;
                    this.rotation += this.rotationSpeed;
                    
                    // 边界检测
                    if (this.x < -this.size * 2) this.x = canvas.width + this.size;
                    if (this.x > canvas.width + this.size) this.x = -this.size * 2;
                    if (this.y < -this.size * 2) this.y = canvas.height + this.size;
                    if (this.y > canvas.height + this.size) this.y = -this.size * 2;
                }
                
                draw() {
                    ctx.save();
                    ctx.translate(this.x, this.y);
                    ctx.rotate(this.rotation);
                    ctx.fillStyle = this.color;
                    
                    ctx.beginPath();
                    ctx.moveTo(this.points[0].x, this.points[0].y);
                    for (let i = 1; i < this.points.length; i++) {
                        ctx.lineTo(this.points[i].x, this.points[i].y);
                    }
                    ctx.closePath();
                    ctx.fill();
                    
                    ctx.restore();
                }
            }
            
            // 初始化图形
            function initShapes(count = 50) {
                for (let i = 0; i < count; i++) {
                    shapes.push(new Shape(patternType));
                }
            }
            
            // 动画循环
            function animate() {
                requestAnimationFrame(animate);
                
                // 半透明填充制造拖尾效果
                ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                
                // 更新和绘制所有图形
                shapes.forEach(shape => {
                    shape.update();
                    shape.draw();
                });
            }
            
            // 初始化并开始动画
            initShapes();
            animate();
            
            // 点击按钮增加图形
            addBtn.addEventListener('click', function() {
                initShapes(20);
            });
            
            // 点击按钮变换模式
            changeBtn.addEventListener('click', function() {
                patternType = patternType < 3 ? patternType + 1 : 1;
                shapes = [];
                initShapes();
            });
            
            // 窗口大小改变时调整canvas尺寸
            window.addEventListener('resize', function() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            });
        });
    </script>
</body>
</html>

ziblog
关注
UGUI 性能优化系列：第二篇——Canvas 与 UI 元素管理
qq_46348216的博客
07-18 2068
本文深入探讨UGUI性能优化的关键点，聚焦Canvas重建机制与UI元素管理。Canvas作为UI渲染的核心组件，其重建过程（布局重建和网格重建）会显著影响性能，尤其是频繁修改RectTransform、Text内容或LayoutGroup时。优化策略包括： 避免频繁重建：减少Update中的UI属性修改，采用事件驱动更新； 优化LayoutGroup：优先静态布局，动态元素使用对象池； 控制Text更新：用StringBuilder减少字符串生成； 合理分层：通过子Canvas隔离高频变动的UI。 同时
html5+canvas绘制几何图形密集动画特效源码.zip
11-03
这个"html5+canvas绘制几何图形密集动画特效源码.zip"文件提供了一个实例，用于展示如何利用HTML5 Canvas API来创建几何图形的密集动画特效。 首先，Canvas API提供了`<canvas>`元素，这是一个基于像素的画布，我们...
HTML5 Canvas发光夜景动画特效深入解析
weixin_35414484的博客
05-01 1178
Canvas提供了两种基本的渐变类型：和。它们分别用于创建线性渐变和径向渐变。下面的代码展示了如何创建这两种渐变并应用到Canvas上。// 获取Canvas上下文// 创建线性渐变// 创建径向渐变交互设计在动画场景中的作用是创建一个吸引用户参与的环境，使得动画不仅仅是视觉上的享受，而且是互动体验的一部分。通过精心设计的交互和动画，可以显著提升用户对产品的记忆度和满意度。
构建HTML5 Canvas粒子图形变形动画特效项目
weixin_42518334的博客
09-02 1571
本文还有配套的精品资源，点击获取 简介：本课程介绍了如何利用HTML5 Canvas技术和JavaScript创建动态粒子图形变形动画特效，提供给网页设计师一种提高视觉吸引力的工具。课程内容涵盖Canvas绘图、粒子系统、颜色处理、动画帧率控制、交互事件处理、性能优化、响应式设计以及代码组织等关键技能。通过本课程的学习，学生将掌握创建和实现具有交互性的粒子动画技术。 ...
HTML5 Canvas雪花动画特效插件开发指南
weixin_35950531的博客
07-05 866
粒子系统是计算机图形学中用于模拟特定类型模糊效果的一种技术，广泛应用于自然现象的模拟，如烟雾、火焰、雨、雪等。粒子可以被定义为从一点发射的图形元素，拥有自己的生命周期，在这个生命周期中，每个粒子会根据特定的规则运动和变化。粒子有多种属性，包括位置、速度、加速度、颜色、大小等。位置属性决定了粒子在画布上的位置，速度和加速度决定了粒子的运动方向和快慢。粒子的颜色和大小可以根据动画的需求进行动态调整。this.x = x;// 粒子位置的X坐标this.y = y;// 粒子位置的Y坐标。
HTML5 Canvas粒子螺旋动画特效实现教程
weixin_34535286的博客
09-16 1134
粒子系统最早起源于计算机图形学中的特效模拟，如1983年Reeves提出的经典论文《Particle Systems – A Technique for Modeling a Class of Fuzzy Objects》奠定了其理论基础。如今，在Web前端领域，借助Canvas API的强大绘图能力，我们可以用JavaScript实现实时运行的轻量级粒子系统。
HTML5 Canvas星空动画特效：实战教程
weixin_35950531的博客
07-05 940
htmltable {th, td {th {pre {简介：HTML5 Canvas提供了一个二维绘图上下文，通过JavaScript实现动态图形绘制，创造出丰富的交互式体验。本教程将介绍如何使用Canvas API和JavaScript在网页上模拟满天星空背景动画特效，包含关键知识点如绘图API使用、动画原理、随机生成技术、性能优化、事件监听、颜色和透明度调整、WebGL支持、响应式设计和性能监控等。
canvas动画科技园_16个富有创意的HTML5 Canvas动画特效集合
weixin_39673184的博客
12-22 542
HTML5技术正在不断的发展和更新，越来越多的开发者也正在加入HTML5阵营，甚至在移动开发上HTML5的地位也是越来越重要了。HTML5中的大部分动画都是通过Canvas实现，因为Canvas就像一块画布，我们可以通过调用脚本在Canvas上绘制任意形状，甚至是制作动画。本文就是收集了很多非常富有创意的一些canvas动画特效例子，这些例子都非常适合大家学习。1、HTML5 Canvas高空瀑布...
canvas实现的几何图形密集变化动画html页面源码
mazai5080的博客
05-03 337
大家好，今天给大家介绍一款，canvas实现的几何图形密集变化动画html页面源码（图1）。送给大家哦，获取方式在本文末尾。 图1 点击任意位置可以切换动画模式（图2） 图2 代码完整，需要的朋友可以下载学习（图3） 图3 本源码编码：10150，需要的朋友，关注文末公众号后，搜索10150，即可获取。 <!doctype html> <html> <head> <meta charset="utf-8"> <title&
HTML5 Canvas粒子光标动画特效实现教程源码
weixin_35370061的博客
03-13 480
本文还有配套的精品资源，点击获取 简介：HTML5 Canvas是一种Web开发技术，用于创建动态图形和交互式动画。本资源介绍如何利用Canvas实现一个粒子光标动画，通过监听鼠标移动事件并动态更新Canvas上的粒子位置来吸引用户注意力。文档包含了完整的源码，展示了粒子的定义、初始化、绘制、状态更新、鼠标事件处理和动画循环等关键步骤。通过本项目，开发者可以学习到Canva...
HTML5 Canvas图形密集动画特效特效代码
03-20
在"HTML5 Canvas图形密集动画特效特效代码"中，我们主要关注的是如何利用Canvas实现一种彩色密集的几何图形的放大缩小动画效果。这种特效通常涉及到以下几个关键知识点： 1. **Canvas元素**：HTML5中的<canvas>元素...
HTML5 Canvas图形密集动画特效.zip
07-04
这个"HTML5 Canvas图形密集动画特效"利用了Canvas的API，展示了一种彩色几何图形动态变化的特效，带给用户极具吸引力的视觉体验。 在JavaScript中，Canvas通过其提供的方法来绘制和操作图形。例如，`fillRect()`...
HTML5 Canvas飘动密集爱心背景动画特效.zip
09-26
在这个“HTML5 Canvas飘动密集爱心背景动画特效”中，我们可以看到Canvas API被用来创建一个浪漫而引人注目的背景效果，其中爱心形状在屏幕上随机生成并动态飘动。 首先，`index.html`文件是整个页面的结构，包含...
Canvas层峦叠嶂波峰动画特效
06-24
总的来说，"Canvas层峦叠嶂波峰动画特效"是一个融合了Canvas 2D绘图和three.js 3D图形渲染技术的项目，展示了JavaScript在网页交互设计中的强大潜力。通过理解和学习这些技术，开发者可以创造出更多富有创意和视觉...
CSS基础详解(2)--Grid网格布局详解
Coding...
12-10 1080
网格布局是一种通过水平与垂直线构成的页面排版方式，由列(column)、行(row)和沟槽(gutter)组成。通过CSS的display: grid属性可创建网格容器，使用grid-template-columns定义列宽（支持px、fr等单位），grid-gap设置间隙。repeat()函数可简化重复轨道定义，minmax()函数能灵活控制行/列尺寸范围。网格分为显式（手动定义）和隐式（自动生成）两种，通过grid-auto-rows可控制隐式行高。网格布局能实现响应式、精确的元素排列，提升页面统一性。
PaperStudio：WYSIWYG文档的Web实现——从CSS Print到客户端PDF生成的技术解析
xinyu_Jina的博客
12-15 565
通过精确控制页面布局、利用 SVG/Canvas 进行高保真渲染，并结合客户端库实现安全的 PDF 导出，这类工具成功地将传统的桌面级排版功能带到了 Web 平台。它将复杂的 CSS Print 规则和 PDF 生成逻辑，封装在了一个用户友好的交互界面中。将 CSS Print 规范、矢量渲染和客户端 PDF 生成技术结合，使得 Web 应用具备了媲美桌面级软件的文档处理能力。等客户端库，在不依赖后端服务器的情况下，将动态生成的 DOM 结构安全、高效地转换为高质量的 PDF 文档。
avue uploader图片预览拉伸变型的css处理方法
经验之谈，不做搬运工
12-10 299
摘要：针对avue uploader图片预览拉伸问题，可通过CSS覆盖解决。使用object-fit: cover属性可让图片覆盖容器并裁剪多余部分，保持比例不变。如需完整显示不裁剪，可改用object-fit: contain。示例代码展示了如何在el-upload组件中应用该样式。
CSS 文本描边最稳方案：多重 text-shadow 实现清晰黑描边
apple_70049717的博客
12-10 313
在前端页面中，当文字内容处于复杂背景（如视频画面、图片区域）之上时，白色字体很容易与背景混合导致不清晰。左上、右上、左下、右下 4 个角方向。描边厚度：由偏移量（如 2px）决定。无模糊：确保边缘硬朗，不会糊成光晕。是最有效的增强可读性的方法。上、下、左、右 4 个方向。
[Web自动化] CSS基础概念和介绍
最新发布
知智
12-15 132
CSS（层叠样式表）是控制网页样式的语言，能将网页内容与表现分离。它具有样式丰富、层叠性和继承性等特点，可通过内嵌式、外联式和行内式三种方式引入HTML文档。CSS基础选择器包括标签选择器、类选择器、ID选择器和通配符选择器，分别用于选择HTML元素、类属性元素、ID属性元素和所有元素。这些特性使CSS成为网页美化和布局的核心技术。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值