UDN-企业互联网技术人气社区

板块导航

浏览  : 1987
回复  : 5

[HTML5] Canvas 绘制粒子动画背景

[复制链接]
泡泡兔的头像 楼主
发表于 2017-2-3 10:57:29 | 显示全部楼层 |阅读模式
  1. <canvasid="canvas">您的浏览器不支持,请升级最新的版本!</canvas>
复制代码

  1. *{
  2.         margin:0px;
  3.         padding:0px;
  4. }
  5. body{
  6.         background:#000;
  7. }
  8. canvas{
  9.         position:absolute;
  10.         width:100%;
  11.         height:100%;
  12. }
复制代码

  1. window.requestAnimFrame = ( function(){
  2.                 return window.requestAnimationFrame ||
  3.                                         window.webkitRequestAnimationFrame ||
  4.                                         window.mozRequestAnimationFrame ||
  5.                                         function(callback){
  6.                                                 window.setTimeout( callback, 1000 / 60 );
  7.                                         };
  8.                 })();
  9.                 var can = document.getElementById("canvas");
  10.                 var cxt = can.getContext("2d");
  11.                 can.width = window.innerWidth;
  12.                 can.height = window.innerHeight;
  13.                 cxt.lineWidth = 0.3;
  14.                 //初始链接线条显示位置
  15.                 var mousePosition = {
  16.                         x : 30*can.width/100,
  17.                         y : 30*can.height/100
  18.                 }
  19.                 //圆形粒子对象参数
  20.                 var dots = {
  21.                         n : 500,//圆形粒子个数
  22.                         distance : 50,//圆形粒子之间的距离
  23.                         d_radius : 100,//粒子距离鼠标点的距离
  24.                         array : []//保存n个圆形粒子对象
  25.                 }
  26.                 //创建随即颜色值
  27.                 functioncolorValue(min){
  28.                         return Math.floor(Math.random()*255 + min);
  29.                 }
  30.                 functioncreateColorStyle(r,g,b){
  31.                         return "rgba("+r+","+g+","+b+", 1)";
  32.                 }
  33.                 //混合两个圆形粒子的颜色
  34.                 functionmixConnect(c1,r1,c2,r2){//圆的颜色 半径
  35.                         return (c1*r1+c2*r2)/(r1+r2);
  36.                 };
  37.                 //生成线条的颜色
  38.                 functionlineColor(dot1,dot2){//获取具体的圆的颜色再计算
  39.                         var color1 = dot1.color,
  40.                                 color2 = dot2.color;
  41.                         var r = mixConnect(color1.r,dot1.radius,color2.r,dot2.radius);
  42.                         var g = mixConnect(color1.g,dot1.radius,color2.g,dot2.radius);
  43.                         var b = mixConnect(color1.b,dot1.radius,color2.b,dot2.radius);
  44.                         return createColorStyle(Math.floor(r),Math.floor(g),Math.floor(b));
  45.                 }
  46.                 //生成圆形粒子的颜色对象
  47.                 functionColor(min){
  48.                         min = min || 0;
  49.                         this.r = colorValue(min);
  50.                         this.g = colorValue(min);
  51.                         this.b = colorValue(min);
  52.                         this.style = createColorStyle(this.r,this.g,this.b);
  53.                 }
  54.                 //创建圆形粒子对象
  55.                 functionDot(){
  56.                         //圆形粒子随机圆心坐标点
  57.                         this.x = Math.random()*can.width;
  58.                         this.y = Math.random()*can.height;
  59.                         //x y 方向运动的速度值
  60.                         this.vx = -0.5 + Math.random();
  61.                         this.vy = -0.5 + Math.random();
  62.                         this.radius = Math.random()*5;
  63.                         //this.color = "#ff3333";
  64.                         this.color = new Color();
  65.                 }
  66.                 //绘制出圆形粒子
  67.                 Dot.prototype.draw = function(){
  68.                         cxt.beginPath();
  69.                         cxt.fillStyle = this.color.style;
  70.                         cxt.arc(this.x,this.y,this.radius,0,Math.PI*2,false);
  71.                         cxt.fill();
  72.                 }
  73.                 //添加圆形粒子
  74.                 functioncreateCircle(){
  75.                         for (var i=0;i<dots.n ;i++ )
  76.                         {
  77.                                 dots.array.push(new Dot());
  78.                         }
  79.                 }
  80.                 //绘制出圆形粒子
  81.                 functiondrawDots(){
  82.                         for (var i=0;i<dots.n ;i++ )
  83.                         {
  84.                                 var dot = dots.array[i];
  85.                                 dot.draw();
  86.                         }
  87.                 }
  88.                
  89.                 //drawDots();
  90.                 //移动
  91.                 functionmoveDots(){
  92.                         for (var i=0;i<dots.n ;i++ ){
  93.                                 var dot = dots.array[i];
  94.                                 //当圆形粒子对象碰壁的时候就反弹回来
  95.                                 if (dot.y < 0 || dot.y > can.height)
  96.                                 {
  97.                                         dot.vx = dot.vx;
  98.                                         dot.vy = -dot.vy;
  99.                                 }else if (dot.x < 0 || dot.x > can.width)
  100.                                 {
  101.                                         dot.vx = -dot.vx;
  102.                                         dot.vy = dot.vy;
  103.                                 }
  104.                                 //给圆形粒子圆心坐标加上速度值移动圆形粒子
  105.                                 dot.x += dot.vx;
  106.                                 dot.y += dot.vy;
  107.                         }
  108.                 }
  109.                 //链接粒子对象
  110.                 functionconnectDots(){
  111.                         for (var i=0;i<dots.n ; i++)
  112.                         {
  113.                                 for ( var j=0;j<dots.n ; j++)
  114.                                 {
  115.                                         iDot = dots.array[i];
  116.                                         jDot = dots.array[j];
  117.                                         if ((iDot.x - jDot.x) < dots.distance && (iDot.y - jDot.y) < dots.distance && (iDot.x - jDot.x) > -dots.distance && (iDot.y - jDot.y) > -dots.distance)
  118.                                         {
  119.                                                 if ((iDot.x - mousePosition.x) < dots.d_radius && (iDot.y - mousePosition.y) < dots.d_radius && (iDot.x - mousePosition.x) > -dots.d_radius && (iDot.y - mousePosition.y) > -dots.d_radius)
  120.                                                 {
  121.                                                         cxt.beginPath();
  122.                                                         //cxt.strokeStyle = "yellow";
  123.                                                         cxt.strokeStyle = lineColor(iDot,jDot);
  124.                                                         cxt.moveTo(iDot.x,iDot.y);
  125.                                                         cxt.lineTo(jDot.x,jDot.y);
  126.                                                         cxt.closePath();
  127.                                                         cxt.stroke();
  128.                                                 }
  129.                                                 
  130.                                         }
  131.                                 }
  132.                         }
  133.                 }
  134.                 createCircle();
  135.                 //让圆形粒子不断的移动
  136.                 functionanimateDots(){
  137.                         cxt.clearRect(0,0,can.width,can.height);
  138.                         moveDots();
  139.                         connectDots()
  140.                         drawDots();
  141.                         requestAnimFrame(animateDots);
  142.                 }
  143.                 animateDots();
  144.                
  145.                 can.onmousemove = function(ev){
  146.                         var ev = ev || window.event;
  147.                         mousePosition.x = ev.pageX;
  148.                         mousePosition.y = ev.pageY;
  149.                 }
  150.                 can.onmouseout = function(){
  151.                         mousePosition.x = can.width/2;
  152.                         mousePosition.y = can.height/2;
  153.                 }
复制代码

相关帖子

发表于 2017-2-3 10:57:59 来自手机 | 显示全部楼层
OMG!介是啥东东
使用道具 举报

回复

发表于 2017-2-13 03:44:24 | 显示全部楼层
说是html5 其实都是js和css3
使用道具 举报

回复

发表于 2018-8-27 10:31:39 | 显示全部楼层
66666666666666666
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部