Tel：028-86922220 我有需求

使用Canvas怎么实现一个炫丽的粒子运动效果

使用Canvas怎么实现一个炫丽的粒子运动效果？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

成都创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站建设、成都网站建设、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的高阳网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

html 代码





Canvas 实现炫丽的粒子运动效果-云库前端





    散开类型：
        
            归位
            随机
        
    
    散开效果（对归位有效）：                    dynamics.spring            dynamics.bounce            dynamics.forceWithGravity            dynamics.gravity            dynamics.easeInOut            dynamics.easeIn            dynamics.easeOut            dynamics.linear             
    

HTML 代码不多，只要是几个操作元素。这里一看就明白。不费过多口舌。我们来看看本文的主角 JavaScript 代码，不过，在看代码前，我们不妨先听听实现这个效果的思路：

  1. 首先，我们得先生成一堆群众演员（粒子）；

  2. 把每个粒子的相关参数挂到自身的一些属性上，因为第个粒子都会有自己的运动轨迹；

  3. 接着得让它们各自运动起来。运动有两种（自由运动和生成文字的运动）；

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
看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。
            
            
                        

            文章题目：使用Canvas怎么实现一个炫丽的粒子运动效果            

            网站路径：http://bzwzjz.com/article/jjigpc.html
        
    
    

        
其他资讯

        
    




    Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号 
友情链接：
    成都网站建设 成都网站制作 成都网站建设 高端网站设计推广 网站设计制作 企业网站建设 做网站设计 宜宾网站设计 成都商城网站建设 广安网站设计 成都响应式网站建设 高端网站建设 重庆外贸网站建设 成都网站建设公司 响应式网站设计 成都网站建设 梓潼网站设计 攀枝花网站设计 重庆网站制作 成都网站制作 成都网站建设公司 高端网站设计 








    
    
        
    • 
        
    • 
        
    • 
        
    
            
     微信扫一扫在线咨询    
        
    
        
    •