Canvas粒子图形变形动画特效

最新推荐文章于 2025-06-23 21:39:41 发布
原创 最新推荐文章于 2025-06-23 21:39:41 发布 · 220 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #css #javascript

<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #121212;
            overflow: hidden;
            font-family: 'Arial', sans-serif;
        }

        canvas {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }

        .controls {
            position: absolute;
            bottom: 20px;
            left: 20px;
            z-index: 100;
            color: white;
        }

        .credit {
            position: absolute;
            bottom: 20px;
            right: 20px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            z-index: 100;
        }

        .credit a {
            color: #4CAF50;
            text-decoration: none;
            transition: color 0.3s;
        }

        .credit a:hover {
            color: #FFD700;
        }

        button {
            background: rgba(76, 175, 80, 0.7);
            color: white;
            border: none;
            padding: 8px 15px;
            margin: 5px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
        }

        button:hover {
            background: rgba(76, 175, 80, 0.9);
        }

        label {
            display: block;
            margin-top: 10px;
            color: white;
        }

        input[type="range"] {
            width: 200px;
            margin-top: 5px;
        }

        select {
            padding: 5px;
            margin-top: 5px;
            width: 200px;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <canvas id="particleCanvas"></canvas>
    
    <div class="controls">
        <button id="resetBtn">重置动画</button>
        <button id="changeColorBtn">改变颜色</button>
        <button id="morphBtn">变形</button>
        
        <label for="shapeSelect">选择形状:</label>
        <select id="shapeSelect">
            <option value="circle">圆形</option>
            <option value="square">方形</option>
            <option value="triangle">三角形</option>
            <option value="star">星形</option>
            <option value="heart">心形</option>
            <option value="text">文字</option>
        </select>
        
        <label for="particleCount">粒子数量: <span id="particleCountValue">1000</span></label>
        <input type="range" id="particleCount" min="100" max="5000" value="1000" step="100">
        
        <label for="speedControl">变形速度: <span id="speedValue">50</span></label>
        <input type="range" id="speedControl" min="10" max="100" value="50">
    </div>
    
    <div class="credit">
        Canvas粒子图形变形动画特效 | 访问 <a href="http://www.0ww.net" target="_blank">0ww.net</a> 获取更多资源
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const canvas = document.getElementById('particleCanvas');
            const ctx = canvas.getContext('2d');
            
            // 设置画布大小为窗口大小
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            
            // 粒子系统参数
            let particles = [];
            let particleCount = 1000;
            let speed = 50;
            let colorHue = 200;
            let animationId;
            let currentShape = 'circle';
            let targetShape = 'circle';
            let morphProgress = 0;
            let morphing = false;
            
            // 形状定义
            const shapes = {
                circle: {
                    getPoints: (count, width, height) => {
                        const points = [];
                        const centerX = width / 2;
                        const centerY = height / 2;
                        const radius = Math.min(width, height) * 0.4;
                        
                        for (let i = 0; i < count; i++) {
                            const angle = (i / count) * Math.PI * 2;
                            points.push({
                                x: centerX + Math.cos(angle) * radius,
                                y: centerY + Math.sin(angle) * radius
                            });
                        }
                        return points;
                    }
                },
                square: {
                    getPoints: (count, width, height) => {
                        const points = [];
                        const centerX = width / 2;
                        const centerY = height / 2;
                        const size = Math.min(width, height) * 0.4;
                        const sideCount = count / 4;
                        
                        // 四条边
                        for (let i = 0; i < sideCount; i++) {
                            // 上边
                            points.push({
                                x: centerX - size + (i / sideCount) * size * 2,
                                y: centerY - size
                            });
                            // 右边
                            points.push({
                                x: centerX + size,
                                y: centerY - size + (i / sideCount) * size * 2
                            });
                            // 下边
                            points.push({
                                x: centerX + size - (i / sideCount) * size * 2,
                                y: centerY + size
                            });
                            // 左边
                            points.push({
                                x: centerX - size,
                                y: centerY + size - (i / sideCount) * size * 2
                            });
                        }
                        return points.slice(0, count); // 确保数量正确
                    }
                },
                triangle: {
                    getPoints: (count, width, height) => {
                        const points = [];
                        const centerX = width / 2;
                        const centerY = height / 2;
                        const size = Math.min(width, height) * 0.4;
                        const sideCount = count / 3;
                        
                        // 计算三角形顶点
                        const top = { x: centerX, y: centerY - size };
                        const right = { x: centerX + size * Math.cos(Math.PI / 6), y: centerY + size * Math.sin(Math.PI / 6) };
                        const left = { x: centerX - size * Math.cos(Math.PI / 6), y: centerY + size * Math.sin(Math.PI / 6) };
                        
                        // 三条边
                        for (let i = 0; i < sideCount; i++) {
                            // 上到右
                            points.push({
                                x: top.x + (right.x - top.x) * (i / sideCount),
                                y: top.y + (right.y - top.y) * (i / sideCount)
                            });
                            // 右到左
                            points.push({
                                x: right.x + (left.x - right.x) * (i / sideCount),
                                y: right.y + (left.y - right.y) * (i / sideCount)
                            });
                            // 左到上
                            points.push({
                                x: left.x + (top.x - left.x) * (i / sideCount),
                                y: left.y + (top.y - left.y) * (i / sideCount)
                            });
                        }
                        return points.slice(0, count); // 确保数量正确
                    }
                },
                star: {
                    getPoints: (count, width, height) => {
                        const points = [];
                        const centerX = width / 2;
                        const centerY = height / 2;
                        const outerRadius = Math.min(width, height) * 0.4;
                        const innerRadius = outerRadius * 0.5;
                        const spikes = 5;
                        const step = Math.PI / spikes;
                        
                        for (let i = 0; i < count; i++) {
                            const angle = (i / count) * Math.PI * 2;
                            const radius = i % 2 === 0 ? outerRadius : innerRadius;
                            points.push({
                                x: centerX + Math.cos(angle * spikes) * radius,
                                y: centerY + Math.sin(angle * spikes) * radius
                            });
                        }
                        return points;
                    }
                },
                heart: {
                    getPoints: (count, width, height) => {
                        const points = [];
                        const centerX = width / 2;
                        const centerY = height / 2;
                        const size = Math.min(width, height) * 0.3;
                        
                        for (let i = 0; i < count; i++) {
                            const t = (i / count) * Math.PI * 2;
                            const x = 16 * Math.pow(Math.sin(t), 3);
                            const y = -(13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t));
                            points.push({
                                x: centerX + x * size / 16,
                                y: centerY + y * size / 16
                            });
                        }
                        return points;
                    }
                },
                text: {
                    getPoints: (count, width, height) => {
                        // 文字形状需要更复杂的实现，这里简化为圆形
                        return shapes.circle.getPoints(count, width, height);
                    }
                }
            };
            
            // 粒子类
            class Particle {
                constructor(x, y) {
                    this.x = x;
                    this.y = y;
                    this.size = Math.random() * 2 + 1;
                    this.color = `hsl(${colorHue + Math.random() * 60}, 100%, 50%)`;
                    this.baseX = x;
                    this.baseY = y;
                    this.density = Math.random() * 30 + 1;
                    this.targetX = x;
                    this.targetY = y;
                }
                
                update() {
                    // 计算到目标位置的距离
                    const dx = this.targetX - this.x;
                    const dy = this.targetY - this.y;
                    const distance = Math.sqrt(dx * dx + dy * dy);
                    
                    // 根据速度参数移动粒子
                    const speedFactor = speed / 50;
                    if (distance > 0.5) {
                        this.x += dx * 0.05 * speedFactor;
                        this.y += dy * 0.05 * speedFactor;
                    }
                }
                
                draw() {
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                    ctx.fillStyle = this.color;
                    ctx.fill();
                }
            }
            
            // 初始化粒子
            function initParticles() {
                particles = [];
                const shapePoints = shapes[currentShape].getPoints(particleCount, canvas.width, canvas.height);
                
                for (let i = 0; i < particleCount; i++) {
                    const point = shapePoints[i % shapePoints.length];
                    particles.push(new Particle(
                        Math.random() * canvas.width,
                        Math.random() * canvas.height
                    ));
                    particles[i].targetX = point.x;
                    particles[i].targetY = point.y;
                }
            }
            
            // 变形到新形状
            function morphToShape(shape) {
                if (morphing || currentShape === shape) return;
                
                targetShape = shape;
                morphing = true;
                morphProgress = 0;
                
                const shapePoints = shapes[shape].getPoints(particleCount, canvas.width, canvas.height);
                
                for (let i = 0; i < particles.length; i++) {
                    const point = shapePoints[i % shapePoints.length];
                    particles[i].targetX = point.x;
                    particles[i].targetY = point.y;
                }
                
                currentShape = shape;
                morphing = false;
            }
            
            // 动画循环
            function animate() {
                // 清除画布
                ctx.fillStyle = 'rgba(18, 18, 18, 0.05)';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                
                // 更新和绘制粒子
                particles.forEach(particle => {
                    particle.update();
                    particle.draw();
                });
                
                animationId = requestAnimationFrame(animate);
            }
            
            // 初始化并开始动画
            initParticles();
            animate();
            
            // 窗口大小调整时重置画布
            window.addEventListener('resize', function() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
                initParticles();
            });
            
            // 控制按钮事件
            document.getElementById('resetBtn').addEventListener('click', function() {
                cancelAnimationFrame(animationId);
                initParticles();
                animate();
            });
            
            document.getElementById('changeColorBtn').addEventListener('click', function() {
                colorHue = Math.random() * 360;
                particles.forEach(particle => {
                    particle.color = `hsl(${colorHue + Math.random() * 60}, 100%, 50%)`;
                });
            });
            
            document.getElementById('morphBtn').addEventListener('click', function() {
                const shape = document.getElementById('shapeSelect').value;
                morphToShape(shape);
            });
            
            document.getElementById('shapeSelect').addEventListener('change', function() {
                const shape = this.value;
                morphToShape(shape);
            });
            
            document.getElementById('particleCount').addEventListener('input', function() {
                particleCount = parseInt(this.value);
                document.getElementById('particleCountValue').textContent = particleCount;
                initParticles();
            });
            
            document.getElementById('speedControl').addEventListener('input', function() {
                speed = parseInt(this.value);
                document.getElementById('speedValue').textContent = speed;
            });
        });
    </script>
</body>
</html>

ziblog
关注
php粒子背景特效_12个精致炫酷的背景装饰特效库（分享）
weixin_39709979的博客
03-09 301
本篇文章给大家分享12个精致炫酷的背景装饰特效库。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。1.particles-bg地址：https://github.com/lindelof/particles-bg效果：2.particles-bg-vue地址：https://github.com/lindelof/awesome-web-effect这是一个基于VUE的粒子动画组件...
构建HTML5 Canvas粒子图形变形动画特效项目
weixin_42518334的博客
09-02 1512
本文还有配套的精品资源，点击获取 简介：本课程介绍了如何利用HTML5 Canvas技术和JavaScript创建动态粒子图形变形动画特效，提供给网页设计师一种提高视觉吸引力的工具。课程内容涵盖Canvas绘图、粒子系统、颜色处理、动画帧率控制、交互事件处理、性能优化、响应式设计以及代码组织等关键技能。通过本课程的学习，学生将掌握创建和实现具有交互性的粒子动画技术。 ...
HTML5 Canvas实现鼠标光标星星跟随动画特效
weixin_32661831的博客
03-19 854
HTML5 Canvas是一个在HTML文档中引入的图形API，它的出现极大地增强了Web页面的动态图形处理能力。通过Canvas，开发者可以使用JavaScript来绘制各种图形和动画，从而创建出具有丰富视觉效果的Web应用。与传统的SVG（可缩放矢量图形）相比，Canvas更适合于像素级操作，更适合于复杂动画和游戏的开发。Canvas提供了非常丰富的绘图函数，可以完成从简单到复杂的各种图形绘制任务。下面是一些常用的绘图函数：: 开始一个新的路径。: 移动到一个新的起点位置。
《canvas教程：基础+动画+实例》专栏目录
wuhen_n的博客
05-24 662
本专栏系统性地介绍了Canvas技术的开发与应用，从基础到进阶，涵盖了图形绘制、颜色填充、路径操作、动画特效、交互设计及性能优化等多个方面。每篇文章均配有代码示例和详细解析，帮助开发者快速掌握Canvas的核心技能。专栏内容包括Canvas的基础知识如矩形、路径、贝塞尔曲线的绘制，以及高级技巧如渐变、阴影、文本操作、图片处理等。
canvas进阶——实现静态图像的变形并合成动态效果
weixin_34343308的博客
01-19 784
写在最前 在之前的这篇bezierMaker.js——N阶贝塞尔曲线生成器的文章中我们提到了对于高阶贝塞尔公式的绘制与生成。不过更多的童鞋看到后可能会不知道其使用场景是什么。故作者本次分享一下基于bezierMaker.js实现的将静态图片按照自定义曲线轨迹扭曲图片并合称为动态效果。 欢迎关注我的博客，不定期更新中—— 效果预览 之前的描...
canvas粒子特效，实现一动态符图案的切换和变化
irisMoon06的博客
04-17 333
【代码】canvas粒子特效，实现一动态符图案的切换和变化。
【愚公系列】2023年08月 Three.js专题-粒子特效案例
热门推荐
时光隧道
08-13 2万+
粒子特效是一种视觉效果，可以模拟出许多粒子在空间中的运动和变化，形成各种美丽的图案和动态效果。常见的粒子特效包括烟雾、火焰、水流、星空、气泡等，可以在电影、电视、游戏等领域中得到广泛应用。实现粒子特效，需要使用计算机图形学技术，如粒子系统、计算流体力学等。粒子平面是指在计算机图形学中，用于呈现粒子特效的平面。粒子特效是通过模拟大量的粒子运动和变化来实现的，而为了在视觉上呈现这些粒子，需要将它们以一定的规律排列在一个平面上，使得观众可以看到这些粒子的动态变化。因此，粒子平面常常被用作粒子特效的载体，通过对平面
HTML5 Canvas水波倒影动画特效实现教程
weixin_42594427的博客
09-28 1348
本文还有配套的精品资源，点击获取 简介：HTML5 Canvas是创建动态图形和交互式用户体验的Web开发工具。本教程专注于通过Canvas API实现图片水波倒影动画特效，涵盖了从基本的Canvas使用到图片加载、扭曲变形处理、倒影绘制以及最终动画实现的全过程。通过结合 drawImage() 、 getImageData() 、 pu...
动感页面加载动画特效实现大全：jQuery + CSS3源码
weixin_36427956的博客
11-15 1291
本文还有配套的精品资源，点击获取 简介：本文将详细展示如何利用jQuery和CSS3技术实现13种动感的页面加载动画特效。通过结合jQuery的选择器、遍历、操作功能与CSS3的关键帧动画和过渡特性，创建出引人入胜的加载效果，包括环形进度条、旋转方块、粒子效果等，旨在改善用户体验并展现网站的创新性。 1. jQuery与CSS3技术介绍 1.1 jQuery技术...
Canvas粒子图形变形动画特效.zip
07-11
Canvas粒子图形变形动画特效就是这种技术的一个应用实例，它将粒子系统与图形变换相结合，生成独特的视觉体验。 首先，要实现这种特效，我们需要理解以下几个核心概念： 1. **粒子系统**：粒子系统是一种模拟复杂...
Canvas粒子图形变形动画特效特效代码
03-20
这个“Canvas粒子图形变形动画特效”利用了Canvas的这一特性，创造出引人入胜的视觉效果。下面我们将深入探讨Canvas粒子系统以及如何实现这种动画特效。 1. **Canvas基础**： - **Canvas API**：Canvas提供了一...
html5 Canvas酷炫粒子图形变形动画特效.zip
09-26
这个“html5 Canvas酷炫粒子图形变形动画特效.zip”压缩包包含了一个利用Canvas API实现的粒子动画特效，适用于那些希望在网站上添加动态视觉元素的开发者。jQuery库和jQuery插件的运用进一步简化了这个过程，使得...
TypeScript接口
jay丿的博客
06-23 514
本文系统解析了TypeScript接口的核心应用场景及设计差异。接口主要作用包括定义类的结构契约、实现类型扩展合并等四大功能。相比类型别名，接口支持声明合并，扩展性更强；相比抽象类，接口仅定义契约，实现更灵活。最佳实践建议优先使用接口定义对象形状，复杂场景可结合类型别名使用。接口作为TS类型系统核心，提供了类型安全保障，同时提升代码可维护性，开发者应根据具体需求灵活选用接口或相关类型方案。
前端打断点
2201_75600005的博客
06-18 203
如果这时想打一些临时的表达式，可以按esc弹出console控制台，这个按钮有个点击事件，然后点击这个js 即可进入到代码中。右上角有可以使用的变量。
java开发为什么要分层
技术分享
06-21 961
java开发为什么要分层
Vue.js第一节
m0_75134325的博客
06-18 254
【代码】Vue.js第一节。
征信查询个人信用查询流量主微信小程序开源
weixin_44039884的博客
06-21 157
征信查询个人信用查询流量主微信小程序开源
前端开发入门指南：掌握HTML基础
最新发布
祯的博客
06-23 636
本文介绍了前端开发和HTML的基础知识。前端开发主要负责构建用户界面，涉及网页、APP等交互设计，需要掌握HTML、CSS、JavaScript三大核心技术。HTML作为网页的基础标记语言，通过标签系统组织内容结构，包含文本、多媒体和超链接等元素。文章详细讲解了HTML的基本语法、文档结构、标签层次关系以及DOM树概念，并提供了编写第一个HTML页面的实践步骤和常用标签速查表。最后强调了编写HTML代码的最佳实践，包括使用语义化标签和保持良好代码结构，为前端开发学习奠定基础。
超高速10G采集卡
FPGA_ADDA的博客
06-19 575
单通道和双通道操作 单通道10GSPS或双通道5GSPS 7 GByte/s持续数据传输速率开放式FPGA支持实时DSP 脉冲检测固件选项波形平均固件选项
探索Canvas粒子图形变形动画特效的神奇世界
#### Canvas粒子图形变形动画特效： 1. **HTML5 Canvas**: HTML5 Canvas 是一个可以绘制图形的 HTML 元素，它提供了脚本接口，可以通过JavaScript操作来绘制各种图形、图像和动画。 2. **粒子系统**: 粒子系统是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值