这篇文章主要介绍了详解Canvas 实现炫丽的粒子运动效果（粒子生成文字），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
没有最好，只有更好，如题所示，这篇文章只要是分享一个用 Canvas 来实现的粒子运动效果。感觉有点标题党了，但换个角度，勉勉强强算是炫丽吧，虽然色彩上与炫丽无关，但运动效果上还是算得上有点点炫的。不管怎么样，我们还是开始这个所谓的炫丽效果吧！
直接上代码 ，不懂可以看代码注释。估计就会看明白大概的思路了。
html 代码
Canvas 实现炫丽的粒子运动效果-云库前端 散开类型：散开效果（对归位有效）：
HTML 代码不多，只要是几个操作元素。这里一看就明白。不费过多口舌。我们来看看本文的主角 JavaScript 代码，不过，在看代码前，我们不妨先听听实现这个效果的思路：
- 首先，我们得先生成一堆群众演员（粒子）；
- 把每个粒子的相关参数挂到自身的一些属性上，因为第个粒子都会有自己的运动轨迹；
- 接着得让它们各自运动起来。运动有两种（自由运动和生成文字的运动）；
JavaScript 代码中使用了三个 Canvas 画布，this.iCanvas（主场）、this.iCanvasCalculate（用来计算文字宽度）、this.iCanvasPixel（用于画出文字，并从中得到文字对应的像素点的位置坐标）。
this.iCanvasCalculate 和 this.iCanvasPixel 这两个无需在页面中显示出来，只是辅助作用。
下面就献上棒棒的 JS 实现代码
function Circle() { var This = this; this.init(); this.generalRandomParam(); this.drawCircles(); this.ballAnimate(); this.getUserText(); // 窗口改变大小后，生计算并获取画面 window.onresize = function(){ This.stateW = document.body.offsetWidth; This.stateH = document.body.offsetHeight; This.iCanvasW = This.iCanvas.width = This.stateW; This.iCanvasH = This.iCanvas.height = This.stateH; This.ctx = This.iCanvas.getContext("2d"); } } // 初始化 Circle.prototype.init = function(){ //父元素宽高 this.stateW = document.body.offsetWidth; this.stateH = document.body.offsetHeight; this.iCanvas = document.createElement("canvas"); // 设置Canvas 与父元素同宽高 this.iCanvasW = this.iCanvas.width = this.stateW; this.iCanvasH = this.iCanvas.height = this.stateH; // 获取 2d 绘画环境 this.ctx = this.iCanvas.getContext("2d"); // 插入到 body 元素中 document.body.appendChild(this.iCanvas); this.iCanvasCalculate = document.createElement("canvas"); // 用于保存计算文字宽度的画布 this.mCtx = this.iCanvasCalculate.getContext("2d"); this.mCtx.font = "128px 微软雅黑"; this.iCanvasPixel = document.createElement("canvas"); this.iCanvasPixel.setAttribute("style","position:absolute;top:0;left:0;"); this.pCtx = null; // 用于绘画文字的画布 // 随机生成圆的数量 this.ballNumber = ramdomNumber(1000, 2000); // 保存所有小球的数组 this.balls = []; // 保存动画中最后一个停止运动的小球 this.animte = null; this.imageData = null; this.textWidth = 0; // 保存生成文字的宽度 this.textHeight = 150; // 保存生成文字的高度 this.inputText = ""; // 保存用户输入的内容 this.actionCount = 0; this.ballActor = []; // 保存生成文字的粒子 this.actorNumber = 0; // 保存生成文字的粒子数量 this.backType = "back"; // 归位 this.backDynamics = ""; // 动画效果 this.isPlay = false; // 标识（在生成文字过程中，不能再生成） } // 渲染出所有圆 Circle.prototype.drawCircles = function () { for(var i=0;ithis.iCanvasW-ball.size || ball.xthis.iCanvasW-ball.size){ ball.x = this.iCanvasW-ball.size; }else{ ball.x = ball.size; } ball.speedX = - ball.speedX; } if(ball.y>this.iCanvasH-ball.size || ball.ythis.iCanvasH-ball.size){ ball.y = this.iCanvasH-ball.size; }else{ ball.y = ball.size; } ball.speedY = - ball.speedY; } } } // 开始动画 Circle.prototype.ballAnimate = function(){ var This = this; var animateFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; (function move(){ animte = animateFrame(move); This.ctx.clearRect(0, 0, This.iCanvasW, This.iCanvasH); This.changeposition(); for(var i=0;i 看了代码估计也只是心里炫了一下，也没有让你想把这个东西做出来的欲望，为此我知道必需得让你眼睛心服口服才行。在线 DEMO： 动感的粒子示例。
人无完人，代码也一样。看起来运行顺畅的代码也或多或少有一些瑕疵，日前这个效果还只支持中文。英文的话，我得再努力一把，不管怎么样，英文后面肯定是会加入来的，只是时间问题了。还有代码中用于标记是否可再次执行生成文字的 属性：this.isPlay ，还是一点瑕疵，this.isPlay 的状态更改没有准确的在粒子归位的那一瞬间更改，而是提前更改了状态。但这个状态不会影响本例子效果的完整实现。
这个例子中用到了 dynamics.js 库，主要是用到它里面的一些运动函数，让粒子动起来更感人一些，仅此而已。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持0133技术站。
以上就是详解Canvas 实现炫丽的粒子运动效果（粒子生成文字）的详细内容，更多请关注0133技术站其它相关文章！
