Canvas万花筒动画特效

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

#特效 #前端 #css #javascript

于 2025-06-17 13:59:40 首次发布

<!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: 80px;
            left: 0;
            width: 100%;
            text-align: center;
            z-index: 2;
        }
        
        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;
            margin: 0 5px;
            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="kaleidoscopeCanvas"></canvas>
    
    <div class="controls">
        <button id="changePattern">变换图案</button>
        <button id="changeColor">变换颜色</button>
    </div>
    

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const canvas = document.getElementById('kaleidoscopeCanvas');
            const ctx = canvas.getContext('2d');
            const changePatternBtn = document.getElementById('changePattern');
            const changeColorBtn = document.getElementById('changeColor');
            
            // 设置canvas尺寸为窗口大小
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            
            // 万花筒参数
            let segments = 6;
            let colorScheme = 0;
            const colorSchemes = [
                ['#FF5252', '#FF4081', '#E040FB', '#7C4DFF', '#536DFE', '#448AFF'],
                ['#40C4FF', '#18FFFF', '#64FFDA', '#69F0AE', '#B2FF59', '#EEFF41'],
                ['#FFFF00', '#FFD740', '#FFAB40', '#FF6E40', '#FF3D00', '#DD2C00'],
                ['#F8BBD0', '#F48FB1', '#F06292', '#EC407A', '#E91E63', '#D81B60']
            ];
            
            // 当前图案参数
            let patternType = 0;
            let time = 0;
            
            // 动画循环
            function animate() {
                requestAnimationFrame(animate);
                
                // 清除画布
                ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                
                // 设置中心点
                const centerX = canvas.width / 2;
                const centerY = canvas.height / 2;
                const radius = Math.min(canvas.width, canvas.height) * 0.4;
                
                // 绘制万花筒
                ctx.save();
                ctx.translate(centerX, centerY);
                
                for (let i = 0; i < segments; i++) {
                    ctx.save();
                    ctx.rotate(i * Math.PI * 2 / segments);
                    
                    // 绘制镜像部分
                    drawPattern(radius);
                    
                    ctx.restore();
                }
                
                ctx.restore();
                
                time += 0.01;
            }
            
            // 绘制图案
            function drawPattern(radius) {
                const colors = colorSchemes[colorScheme];
                
                switch (patternType) {
                    case 0:
                        // 螺旋图案
                        for (let j = 0; j < 50; j++) {
                            const angle = time + j * 0.1;
                            const r = radius * (j / 50);
                            const x = Math.cos(angle) * r;
                            const y = Math.sin(angle) * r;
                            const size = 5 + Math.sin(time + j * 0.2) * 3;
                            
                            ctx.fillStyle = colors[j % colors.length];
                            ctx.beginPath();
                            ctx.arc(x, y, size, 0, Math.PI * 2);
                            ctx.fill();
                        }
                        break;
                        
                    case 1:
                        // 波纹图案
                        for (let j = 0; j < 30; j++) {
                            const r = radius * (j / 30);
                            const size = 10 + Math.sin(time * 2 + j * 0.5) * 8;
                            
                            ctx.strokeStyle = colors[j % colors.length];
                            ctx.lineWidth = 2;
                            ctx.beginPath();
                            ctx.arc(0, 0, r, 0, Math.PI * 2);
                            ctx.stroke();
                            
                            for (let k = 0; k < 6; k++) {
                                const angle = time + k * Math.PI / 3;
                                const x = Math.cos(angle) * r;
                                const y = Math.sin(angle) * r;
                                
                                ctx.fillStyle = colors[(j + k) % colors.length];
                                ctx.beginPath();
                                ctx.arc(x, y, size * 0.5, 0, Math.PI * 2);
                                ctx.fill();
                            }
                        }
                        break;
                        
                    case 2:
                        // 几何图案
                        for (let j = 1; j <= 10; j++) {
                            const points = [];
                            const sides = 3 + j % 5;
                            const r = radius * (j / 10);
                            
                            for (let k = 0; k < sides; k++) {
                                const angle = time + k * Math.PI * 2 / sides;
                                points.push({
                                    x: Math.cos(angle) * r,
                                    y: Math.sin(angle) * r
                                });
                            }
                            
                            ctx.fillStyle = colors[j % colors.length];
                            ctx.globalAlpha = 0.6;
                            ctx.beginPath();
                            ctx.moveTo(points[0].x, points[0].y);
                            
                            for (let k = 1; k < points.length; k++) {
                                ctx.lineTo(points[k].x, points[k].y);
                            }
                            
                            ctx.closePath();
                            ctx.fill();
                        }
                        break;
                }
            }
            
            // 变换图案
            changePatternBtn.addEventListener('click', function() {
                patternType = (patternType + 1) % 3;
            });
            
            // 变换颜色
            changeColorBtn.addEventListener('click', function() {
                colorScheme = (colorScheme + 1) % colorSchemes.length;
            });
            
            // 窗口大小改变时调整canvas尺寸
            window.addEventListener('resize', function() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            });
            
            // 初始化动画
            animate();
        });
    </script>
</body>
</html>

ziblog
关注
利用HTML5的canvas制作万花筒动画特效
heshan1992的博客
08-18 2212
1 DOCTYPE HTML> 2 html> 3 head> 4 style> 5 #canvas{ 6 background-color:#cccccc; 7 8 } 9 style> 10 script> 11 window.onload=function(){ 12 var canvas=d
HTML5 Canvas万花筒动画特效.zip
07-04
"HTML5 Canvas万花筒动画特效"是利用Canvas元素结合JavaScript技术实现的一种视觉效果，通常用于网站的背景动画或者交互式设计中，给用户带来独特而引人入胜的视觉体验。 在HTML5中，`<canvas>`标签是一个可绘制...
canvas 万花筒
weixin_30537391的博客
09-27 278
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #myCanvas1 {...
HTML5 Canvas与WebGL实现3D万花筒动画特效
weixin_35756690的博客
08-16 1092
WebGL的渲染管线分为几个阶段：准备数据、设置顶点着色器、设置片元着色器、创建图元、光栅化、片元处理。每一个阶段都有其特定的职责，最终产生屏幕上显示的像素。graph LR;A[开始] --> B[准备数据]B --> C[顶点着色器]C --> D[图元装配]D --> E[光栅化]E --> F[片元着色器]F --> G[像素操作]G --> H[结束]在WebGL中，开发者需要通过GLSL（OpenGL Shading Language）编写着色器来处理这些阶段。
JS特效第145弹：canvas画布3D的万花筒动画特效
weixin_38343072的博客
02-13 832
经典的JS特效动画效果，效果实现的全部代码、工具、资源已提供，可供学习借鉴
使用canvas制作一个万花筒旋转特效
王铁柱666的博客
12-22 433
函数中，我们清除了画布，并在画布的中央以不同的旋转角度多次绘制这个图案，从而创建了万花筒的效果。你可以根据需要调整图案的形状、颜色、数量和旋转速度等参数来定制你的万花筒效果。函数来绘制一个基本的图案（在这里是一个三角形）。来循环绘制并更新旋转角度，从而创建动画效果。创建一个万花筒旋转特效使用HTML5的。这个示例中，我们定义了一个。
HTML5 Canvas粒子螺旋动画特效实现教程
weixin_34535286的博客
09-16 1140
粒子系统最早起源于计算机图形学中的特效模拟，如1983年Reeves提出的经典论文《Particle Systems – A Technique for Modeling a Class of Fuzzy Objects》奠定了其理论基础。如今，在Web前端领域，借助Canvas API的强大绘图能力，我们可以用JavaScript实现实时运行的轻量级粒子系统。
html5 3D万花筒无限延伸动画js特效
ICode联盟
03-14 248
一款酷炫的html5基于canvas绘制3D万花筒无限延伸动画特效，还有各种颜色的模糊碎片粒子动画伴随。
HTML5 Canvas万花筒动画特效特效代码
03-20
在这个“HTML5 Canvas万花筒动画特效”中，我们将深入探讨Canvas的基本用法以及如何实现这种酷炫的万花筒效果。 首先，Canvas是一个HTML5元素，通过JavaScript API提供了一个画布，开发者可以通过API提供的方法来...
HTML5 Canvas万花筒动画特效
08-23
这是一款利用HTML5 Canvas技术实现的万花筒动画特效，动画开始时，逐渐生成一些随机颜色的矩形方块，然后就不停的旋转，就像万花筒一样，矩形方块越来越小。唯一一点缺陷就是不能像真实万花筒那样出现各种各样漂亮的...
HTML5 Canvas酷炫万花筒动画特效
06-11
在本案例中，我们探讨的是如何使用HTML5 Canvas实现酷炫的万花筒动画特效。 首先，`index.html`是整个应用的入口文件，它包含了页面的基本结构和对JavaScript及CSS文件的引用。在HTML5中，`<canvas>`元素是Canvas的...
HTML5 Canvas酷炫万花筒动画特效.zip
09-26
总的来说，这个压缩包提供的HTML5 Canvas万花筒动画特效是一个集成了jQuery、Canvas和CSS技术的实例，对于学习和理解这些技术的结合应用有着很好的参考价值。通过深入研究和调整这些代码，开发者不仅可以提升自己的...
vue2/vue3前端创建脚手架并引入RBAC权限模型
demotang的博客
12-18 193
本文介绍了基于Vue的RBAC权限管理系统实现方案。主要内容包括：1) 使用VueCLI创建项目并配置基础结构；2) 封装axios请求，实现请求/响应拦截；3) 通过Vuex管理角色和权限状态；4) 实现路由守卫和动态路由生成；5) 开发权限指令和按钮组件进行细粒度控制；6) 完整RBAC流程实现，包括登录认证、权限获取和访问控制。该方案覆盖了前端RBAC的核心功能，可根据项目需求灵活调整。
Harmony OS Web 组件：如何在新窗口中打开网页（实战分享）
Yihong1833100198的博客
12-17 903
摘要：本文分享了Harmony OS Web组件实现新窗口打开网页的实战经验。通过multiWindowAccess()设置允许新窗口，结合onWindowNew回调捕获并处理网页中的新窗口请求（如target="_blank"链接或window.open调用）。文章提供了典型应用场景（如区分内外链处理）、完整代码示例和常见问题解决方案，帮助开发者实现更智能的网页打开策略，提升应用体验。
万字讲解内网横向渗透vulnstack（七）：红日靶场7实战全流程1-提权Web1/Web2（CVE-2021-3493）
mooyuan的网络安全博客
12-18 1144
本文详细记录了针对红日靶场7的多层渗透测试过程。首先通过外网攻击利用Redis未授权漏洞获取Web1跳板机权限，随后以此为跳板对内网Web2服务器进行渗透，先后利用Laravel漏洞获取初始访问权限、通过环境变量提权获取Docker容器内root权限，最后利用特权模式实现Docker逃逸，成功控制宿主机。整个渗透过程涉及信息收集、漏洞利用、权限提升、容器逃逸等多个环节，展示了从外网到内网的完整攻击链。
前端接收了id字段，发送给后端就变了
最新发布
Hcy_code的博客
12-20 137
后端传的 id 到前端，前端发送时 id 发生变化
【每日算法】LeetCode 78. 子集
LYFlied的博客
12-18 686
前端开发者学习算法的重要性与实践 文章摘要：算法学习对前端开发者至关重要，是从"页面构建者"向"复杂系统设计者"转变的关键。以LeetCode 78题子集问题为例，展示了回溯法、迭代法和位运算三种解法，并分析了各自的优缺点。回溯法因其可读性和灵活性成为最优解，特别适合前端场景如权限系统、商品筛选器等。文章强调算法思想比具体实现更重要，建议前端开发者通过实际应用场景来理解和练习算法，从而提升技术视野和问题解决能力。
【每日算法】LeetCode 17. 电话号码的字母组合
LYFlied的博客
12-18 844
摘要： LeetCode 17题要求根据电话数字组合返回所有可能的字母排列。该问题本质是组合问题，适合用回溯算法解决，其核心是通过递归探索所有路径（时间复杂度O(3^m×4^n)，空间O(m+n)）。提供了三种实现：经典回溯（递归清晰）、迭代法（队列避免栈溢出）和函数式编程（代码简洁）。回溯算法最优，因其必须遍历所有组合且空间效率高。类似场景包括前端动态表单、路由权限组合等，掌握此类算法能提升复杂系统设计能力。
【短链接项目笔记】Day1 用户模块
m0_54394021的博客
12-17 1047
短链接（Short Link）是指将一个原始的长 URL（Uniform Resource Locator）通过特定的算法或服务转化为一个更短、易于记忆的 URL。短链接通常只包含几个字符，而原始的长 URL 可能会非常长。短链接的原理非常简单，通过一个原始链接生成个相对短的链接，然后通过访问短链接跳转到原始链接。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值