• 本站搬迁至Linode机房,购买Linode 1G机型仅需$10/月,点此访问官网
  • 百度口碑求好评,http://koubei.baidu.com/s/www.zhiyanblog.com
  •    6个月前 (05-17)  前端源码 |   18 条评论  489 
    文章评分 2 次,平均分 3.0
    [收起] 文章目录

    一段简短的JS代码,利用html5的canva动画特性,实现多彩圆点气泡动态背景。

    网上流传的那种动态背景使用的是easyBackground这种js库,原理是一样的~

     

    效果图

    js-circles-canvas-background

     

    代码

    页面中插入如下js代码,或者并入到js文件并引入到页面也可:

     var canvas=document.getElementById("canvas"); var cxt=canvas.getContext("2d"); function Dot(){     this.alive=true;this.x=Math.round(Math.random()*canvas.width);     this.y=Math.round(Math.random()*canvas.height);     this.diameter=Math.random()*10.8;     this.ColorData={Red:Math.round(Math.random()*255),Green:Math.round(Math.random()*255),Blue:Math.round(Math.random()*255)};     this.alpha=0.1;     this.color="rgba("+this.ColorData.Red+", "+this.ColorData.Green+","+this.ColorData.Blue+","+this.alpha+")";     this.velocity={x:Math.round(Math.random()<0.5?-1:1)*Math.random()*0.7,y:Math.round(Math.random()<0.5?-1:1)*Math.random()*0.7} } Dot.prototype={     Draw:function(){         cxt.fillStyle=this.color;cxt.beginPath();         cxt.arc(this.x,this.y,this.diameter,0,Math.PI*2,false);cxt.fill()     },     Update:function(){         if(this.alpha<0.8){             this.alpha+=0.01;             this.color="rgba("+this.ColorData.Red+", "+this.ColorData.Green+","+this.ColorData.Blue+","+this.alpha+")"         }         this.x+=this.velocity.x;         this.y+=this.velocity.y;         if(this.x>canvas.width+5||this.x<0-5||this.y>canvas.height+5||this.y<0-5){this.alive=false}     } }; var Event={     rArray:&#91;&#93;,     Init:function(){         canvas.width=window.innerWidth;         canvas.height=window.innerHeight;         for(var x=0;x<150;x++){             this.rArray.push(new Dot())         }         this.Update()     },     Draw:function(){         cxt.clearRect(0,0,canvas.width,canvas.height);         this.rArray.forEach(function(dot){dot.Draw()})     },     Update:function(){         if(Event.rArray.length<150){             for(var x=Event.rArray.length;x<150;x++){Event.rArray.push(new Dot())}         }         Event.rArray.forEach(function(dot){dot.Update()});         Event.rArray=Event.rArray.filter(function(dot){return dot.alive});         Event.Draw();         requestAnimationFrame(Event.Update)     } }; window.onresize=function(){Event.rArray=&#91;&#93;; canvas.width=window.innerWidth; canvas.height=window.innerHeight}; Event.Init(); &#91;/php&#93; </p> <p>&nbsp;</p> <p>然后页面插入canvas动画层的锚点,ID要和js中设置的一致,这里是canvas。
    
    
    

    <canvas id="canvas" width="1440" height="900"></canvas>

    大功告成~

     

    除特别注明外,本站所有文章均为知言的自留地原创,转载请注明出处来自http://www.zhiyanblog.com/js-circles-canvas-background.html

    关于
    知言博客是由WordPress业余爱好者zhiyan建立的WordPress以及WEB资源站,集WordPress教程、主题、插件以及众多前端素材、代码等其他内容于一体,努力为相关用户提供帮助。

    发表评论

    表情 格式

    1. :razz: 嗯,不知道会不会占网速

      ficy520 评论达人 LV.5 1周前 (11-05) [0] [0]
    2. 好好学习

      siyeah 评论达人 LV.3 2个月前 (09-13) [0] [0]
    3. 效果棒棒的

      河南米联电子科技 评论达人 LV.1 3个月前 (08-21) [0] [0]
    4. 收藏了

      qkwu 评论达人 LV.5 3个月前 (08-14) [0] [0]
    5. 这个效果好

      tianming 评论达人 LV.5 3个月前 (08-13) [0] [0]
    6. 样式太多,比较耗内存

      书~香飘飘 评论达人 LV.1 3个月前 (08-06) [0] [0]
    7. 学习了

      Tiger 评论达人 LV.5 4个月前 (07-30) [0] [0]
    8. 这个网站不错 哦

      Ricky 评论达人 LV.1 4个月前 (07-24) [0] [0]
    9. 正!!

      hallo 评论达人 LV.5 5个月前 (06-21) [0] [0]
    10. 不错啊

      porry1 评论达人 LV.3 5个月前 (06-16) [0] [0]
    11. 哦,回复了试试看

      d754903977 评论达人 LV.3 5个月前 (06-05) [0] [0]
    12. 测试一下我的Gravatar全球通用头像是否成功。

      小彩笔 评论达人 LV.1 6个月前 (05-31) [0] [0]
    13. 很好,上档次哈哈

      独醉寒风 评论达人 LV.1 6个月前 (05-28) [0] [0]
    14. 很漂亮

      阿古 评论达人 LV.1 6个月前 (05-27) [0] [0]
    15. :?: 扒别人的也要说放上转字吧,我在别的地方看过一模一样的

      qwe 评论达人 LV.1 6个月前 (05-17) [2] [0]
    16. 不错 :smile:

      qkwu 评论达人 LV.5 6个月前 (05-17) [0] [0]
    切换注册

    登录

    忘记密码 ?

    您也可以使用第三方帐号快捷登录

    切换登录

    注册

    扫一扫二维码分享