Canvas生成艺术｜意外诞生的混沌风暴（附完整源码+GitHub部署）

Canvas生成艺术意外诞生的混沌风暴附完整源码GitHub部署文章目录Canvas生成艺术意外诞生的混沌风暴附完整源码\GitHub部署一、作品效果预览二、创作历程主打一个“瞎改出奇迹”1\. 初始阶段从简单图形入手2\. 进阶阶段尝试粒子系统3\. 神来之笔误改参数诞生模糊风暴4\. 翻车时刻20万粒子干响CPU5\. 最终优化丝滑60fps版本三、核心技术解析新手友好一看就懂1\. 初始化画布2\. 随机数工具函数3\. 核心粒子类模糊风暴的关键4\. 动画循环与交互逻辑四、性能优化要点解决卡顿问题五、完整源码可直接复制使用六、GitHub部署教程超简单新手也能会1\. 准备文件2\. 上传到GitHub3\. 开启GitHub Pages七、总结与感悟哈喽大家好我是董翔GitHubdxiangwiki一个刚入门Canvas的前端小白今天给大家分享一个「无心插柳」的Canvas生成艺术作品——混沌风暴Chaos Storm。说出来你可能不信这个看起来超炫酷的模糊风暴特效最初只是我瞎改代码、手滑输错参数搞出来的“意外之作”从20万粒子CPU烤机版到最终丝滑60fps优化版全程充满了编程的乐趣和惊喜今天就把完整创作过程、核心代码和GitHub部署教程一次性分享给大家新手也能直接上手复刻一、作品效果预览先放一张动态效果描述建议大家直接去我的GitHub Pages体验更直观✅ 全屏黑色背景加载自动触发中心彩色爆炸✅ 鼠标移动即可触发全屏模糊风暴越动越炸✅ 彩虹色随机线条交织自带流动模糊感视觉冲击力拉满✅ 优化后全程60fpsCPU不吵、不卡顿普通电脑也能流畅运行在线体验地址GitHub Pageshttps://dxiangwiki.github.io/chaos-storm/GitHub仓库地址https://github.com/dxiangwiki/chaos-storm二、创作历程主打一个“瞎改出奇迹”作为Canvas新手我本来只是想试试画圆、画线条结果一步步“误打误撞”做出了这个特效整个过程特别有趣分享给同样刚入门的小伙伴说不定能给你们带来灵感1. 初始阶段从简单图形入手刚开始接触Canvas先练了最基础的操作画圆形、画正方形、画线条代码很简单就是熟悉Canvas的基本APIarc、fill、beginPath这些比如画一个黄色大圆、红色小圆纯粹练手。2. 进阶阶段尝试粒子系统练熟基础图形后跟着教程写了一个简单的粒子类实现了“点击生成粒子”的效果这时候还只是普通的烟花雏形没有任何特别的地方。3. 神来之笔误改参数诞生模糊风暴这是最关键的一步我本来想调整粒子线条的方向随手把代码里的「this.angle」改成了「this.angle / 2」也就是这一个小小的改动让线条方向和粒子运动方向错开了一半瞬间从“笔直烟花”变成了“扭曲模糊风暴”效果直接拉满// 原本的代码笔直线条ctx.lineTo(this.x-Math.cos(this.angle)*this.length,this.y-Math.sin(this.angle)*this.length);// 我瞎改后的代码模糊风暴核心ctx.lineTo(this.x-Math.cos(this.angle/2)*this.length,this.y-Math.sin(this.angle/2)*this.length);4. 翻车时刻20万粒子干响CPU改出模糊风暴后我一时兴起把粒子生成数量从200改成了200000手滑输多了两个0结果一运行CPU直接拉满、风扇疯狂转动屏幕卡成PPT——这就是“CPU烤机版”混沌风暴虽然炫酷但根本没法正常体验5. 最终优化丝滑60fps版本为了解决卡顿问题我做了一系列优化后面会详细说严格限制粒子数量、简化计算、加快粒子消失速度最终实现了“效果不变、丝滑运行”的版本这也是现在GitHub上的最终版。三、核心技术解析新手友好一看就懂这个项目的核心是「Canvas粒子系统」没有复杂的框架纯原生JSCanvas实现主要分为3个部分初始化画布、粒子类、动画循环下面拆解关键代码新手也能看懂。1. 初始化画布首先创建Canvas元素设置画布铺满整个屏幕同时监听窗口 resize 事件保证窗口缩放时特效依然全屏显示。constcanvasdocument.querySelector(#canvas);constctxcanvas.getContext(2d);// 初始化画布铺满屏幕functioninit(){canvas.widthwindow.innerWidth;canvas.heightwindow.innerHeight;}init();// 窗口缩放时重新初始化window.addEventListener(resize,init);2. 随机数工具函数整个特效的“混沌感”来自随机数比如粒子的位置、速度、颜色、长度都是随机的这里封装一个简单的随机数工具方便后续调用。// 生成min到max之间的随机数functionrandom(min,max){returnMath.random()*(max-min)min;}3. 核心粒子类模糊风暴的关键粒子类是整个项目的核心每个粒子都是一个独立的对象包含位置、速度、角度、颜色等属性还有更新update和绘制draw两个方法——这也是生成艺术中粒子系统的核心逻辑通过控制每个粒子的行为形成整体的视觉效果。classFireworkParticle{constructor(x,y){this.xx;// 粒子x坐标鼠标位置this.yy;// 粒子y坐标鼠标位置this.anglerandom(0,Math.PI*2);// 随机角度0-360度this.speedrandom(1,4);// 随机速度优化后避免卡顿this.lengthrandom(8,30);// 随机线条长度// 随机彩虹色HSL色彩模型更丰富的色彩变化this.colorhsl(${random(0,360)}, 100%,${random(50,80)}%);this.lineWidthrandom(1,3);// 随机线条粗细this.alpha1;// 透明度慢慢消失this.decayrandom(0.02,0.05);// 透明度衰减速度加快消失减少堆积}// 更新粒子状态移动、透明度衰减update(){this.xMath.cos(this.angle)*this.speed;// 按角度移动xthis.yMath.sin(this.angle)*this.speed;// 按角度移动ythis.alpha-this.decay;// 透明度降低this.speed*0.98;// 速度衰减模拟自然减速}// 绘制粒子模糊风暴的核心代码draw(){ctx.save();ctx.globalAlphathis.alpha;// 设置透明度ctx.strokeStylethis.color;// 设置线条颜色ctx.lineWidththis.lineWidth;// 设置线条粗细ctx.lineCapround;// 线条圆角更柔和ctx.beginPath();// 关键角度除以2造成线条错位形成模糊风暴ctx.moveTo(this.x,this.y);ctx.lineTo(this.x-Math.cos(this.angle/2)*this.length,this.y-Math.sin(this.angle/2)*this.length);ctx.stroke();ctx.restore();}}4. 动画循环与交互逻辑用 requestAnimationFrame 实现动画循环每帧更新粒子状态、绘制粒子同时添加鼠标移动事件实现“鼠标一动就炸屏”的交互效果另外加入粒子数量限制避免CPU过载这也是优化卡顿的关键。letparticles[];constMAX_PARTICLES5000;// 最大粒子数限制数量避免卡顿// 生成爆炸单次生成数量限制functioncreateExplosion(x,y,count200){// 防止粒子溢出只在总数没满的时候生成constcanAddMAX_PARTICLES-particles.length;constactualCountMath.min(count,canAdd);for(leti0;iactualCount;i){particles.push(newFireworkParticle(x,y));}}// 页面加载自动触发中心爆炸createExplosion(canvas.width/2,canvas.height/2,300);// 鼠标移动触发爆炸核心交互canvas.addEventListener(mousemove,(e){createExplosion(e.x,e.y,100);});// 动画循环每帧更新、绘制粒子functionanimate(){requestAnimationFrame(animate);// 半透明背景实现拖尾效果更有流动感ctx.fillStylergba(0, 0, 0, 0.1);ctx.fillRect(0,0,canvas.width,canvas.height);// 过滤掉透明度小于0.01的粒子减少计算量particlesparticles.filter(pp.alpha0.01);// 遍历所有粒子更新状态、绘制粒子particles.forEach(p{p.update();p.draw();});}// 启动动画animate();四、性能优化要点解决卡顿问题从20万粒子卡顿版优化到丝滑60fps主要做了5个关键优化新手可以参考这些优化思路避免自己写的Canvas特效卡顿严格限制最大粒子数设置 MAX_PARTICLES 5000多一个都不生成从根源上减少CPU计算量这是最有效的优化手段之一。减少单次生成数量鼠标移动时单次生成100个粒子避免瞬间堆爆粒子池。加快粒子消失速度提高透明度衰减速度decay让粒子快速消失减少画面冗余和计算量。简化随机计算去掉双重随机比如原本的 speed random(2, random(4,8))改为固定范围随机减少CPU计算压力。优化绘制逻辑缩短线条长度、减少不必要的绘制操作同时使用全屏半透明擦除保证拖尾效果的同时提升渲染效率。五、完整源码可直接复制使用下面是完整的 index.html 代码复制保存为HTML文件直接在浏览器打开就能看到效果也可以直接上传到GitHub部署。!DOCTYPEhtml混沌风暴 - 董翔的Canvas生成艺术六、GitHub部署教程超简单新手也能会很多小伙伴想把自己的作品部署到GitHub Pages这样可以直接分享链接给别人看下面是详细步骤跟着点就行1. 准备文件创建一个名为 chaos-storm 的文件夹里面放入3个文件前面已经准备好index.html上面的完整源码README.md项目介绍前面帮大家写好的LICENSEMIT协议2026年版前面提供的2. 上传到GitHub# 1. 初始化git打开终端进入项目文件夹gitinit# 2. 添加所有文件gitadd.# 3. 提交代码备注可自定义gitcommit-m✨ Chaos Storm 混沌风暴 - 董翔的Canvas生成艺术# 4. 关联GitHub仓库替换成你的仓库地址gitremoteaddorigin https://github.com/dxiangwiki/chaos-storm.git# 5. 上传到GitHub报错就用git push -u origin mastergitpush-uorigin main3. 开启GitHub Pages进入你的GitHub仓库chaos-storm点击顶部「Settings」往下滑找到「Pages」选项Branch选择「main」或master文件夹选择「/root」点击「Save」等待1-2分钟即可获得在线链接七、总结与感悟作为一个刚入门Canvas的小白这个项目让我深刻感受到了编程的乐趣——艺术往往诞生于意外和失控。没有复杂的技术没有严谨的规划只是随手改一个参数、手滑输错一个数字就诞生了一个独一无二的作品。这也让我明白学习前端不必一直循规蹈矩偶尔“瞎改”一下说不定就能收获意想不到的惊喜。这个项目虽然简单但包含了Canvas粒子系统、动画循环、性能优化等核心知识点新手可以通过这个项目快速熟悉Canvas的基本用法同时体会生成艺术的魅力——让代码成为画笔让随机性成为灵感这就是生成艺术的终极浪漫。最后附上我的GitHub仓库地址欢迎大家Star、Fork也可以根据自己的喜好修改参数玩出属于自己的混沌风暴GitHub仓库https://github.com/dxiangwiki/chaos-storm在线体验https://dxiangwiki.github.io/chaos-storm/如果大家有更好的优化方案或者想一起交流Canvas创作欢迎在评论区留言一起进步作者董翔dxiangwiki邮箱3631247406qq.com