使用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.x this.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.y this.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 看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。
新闻名称:使用Canvas怎么实现一个炫丽的粒子运动效果
文章转载:http://njwzjz.com/article/jjigpc.html