canvas水母

下载代码

html

css

js

分享到微信朋友圈

X

html

css

JavaScript

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var squids = new Array(32);
var bubbles = new Array(54);
var t = 0;
//create squids
for (var i=0; i<squids.length; i++) {
  var s = 20, e = 160;
  squids[i] = {
    re: s + (Math.random()*e),
    g:  s + (Math.random()*e),
    b:  s + (Math.random()*e),
    x: Math.random()*innerWidth, 
    y: Math.random()*innerHeight, 
    vx: (0.5-Math.random())/4,
    vy: 0.1-Math.random(),
    r: 10 + (Math.random()*40),
    a: []
  };
}
//create bubbles
for (var i=0; i<bubbles.length; i++) {
  bubbles[i] = {
    x: Math.random()*innerWidth, 
    y: Math.random()*innerHeight, 
    vx: 0.5-Math.random(), 
    vy: -0.2-Math.random(), 
    o: 0.05 + Math.random()*0.1,
    r: 3 + Math.random()*20
  }; 
}
var limit = function (d) {
  if (d.x<-d.r) d.x = innerWidth+d.r;
  if (d.x>innerWidth+d.r) d.x = -d.r;
  if (d.y<-d.r) d.y = innerHeight+d.r;
  if (d.y>innerHeight+d.r) d.y = -d.r;
};
var animate = function () {
  t++;
  canvas.width = innerWidth;
  canvas.height = innerHeight;
  bubbles.forEach(function (b) {
    b.x += b.vx;
    b.y += b.vy;
    limit(b);
    ctx.fillStyle = 'rgba(255,255,255,'+b.o+')';
    ctx.beginPath();
    ctx.arc(b.x,b.y,b.r,Math.PI*2,0);
    ctx.fill();
  });
  squids.forEach(function (d) {
    var w = Math.sin((t+(d.r*100))/10);
    d.x += d.vx*4; 
    d.y -= w+1;
    d.y += d.vy;
    limit(d);
    var color1 =  'rgba('+d.re+','+d.g+','+d.b+',0.4)';
    var color2 =  'rgba('+d.re+','+d.g+','+d.b+',0.2)';
    ctx.fillStyle = color1;
    ctx.beginPath();
    ctx.arc(d.x,d.y,d.r,Math.PI+(-0.5+d.vx)-(w/4),(0.5+d.vx)+(w/4));
    ctx.fill();
    d.a.push({x:d.x,y:d.y-(d.r*0.2)});
    if (d.a.length > d.r*3) d.a.splice(0, 1);
    d.a.forEach(function (p, i) {
      ctx.fillStyle = color2;
      ctx.fillRect(p.x,p.y,2,2);
      if (i > d.a.length/2) {
        ctx.fillRect(p.x-(d.r/4),p.y,2,2);
        ctx.fillRect(p.x+(d.r/4),p.y,2,2);
      }
      if (i > d.a.length/3) {
        ctx.fillRect(p.x+(d.r/10),p.y-10,2,2);
        ctx.fillRect(p.x-(d.r/10),p.y-10,2,2);
      }
    });
  });
  requestAnimationFrame(animate);
};
animate();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg

<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas水母-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号