• 售前

  • 售后

热门帖子
入门百科

js canvas实现圆形流水动画

[复制链接]
后果后我买卖顺 显示全部楼层 发表于 2021-10-26 13:34:07 |阅读模式 打印 上一主题 下一主题
本文实例为各人分享了canvas实现圆形流水动画的详细代码,供各人参考,详细内容如下
媒介

特效展示
效果展示


代码展示

index.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <!-- <link rel="stylesheet" href="style.css" > -->
  9. </head>
  10. <body>
  11.     <script src="main.js"></script>
  12. </body>
  13. </html>
复制代码
main.js
  1. /*
  2. * Noel Delgado - @pixelia_me
  3. */
  4. (function() {
  5.   var ctx, w, h, cx, cy, PI, PI_HALF, cos, sin, random, lineWidth, C,
  6.       rings, ringsLength, data;
  7.   ctx = document.createElement('canvas').getContext('2d');
  8.   w = 600;
  9.   h = 600;
  10.   cx = (w / 2);
  11.   cy = (h / 2);
  12.   rings = [];
  13.   ringsLength = 0;
  14.   
  15.   PI = Math.PI;
  16.   PI_HALF = PI / 2;
  17.   cos = Math.cos;
  18.   sin = Math.sin;
  19.   random = Math.random;
  20.   lineWidth = 0.2;
  21.   C = ["#ABF8FF", "#E76B76", "#1D2439", "#4F3762", "#67F9FF", "#0C0F18"];
  22.   
  23.   data = [
  24.     /* ring {t:total_particles, r:radius, d:distance, s:speed, c:color} */
  25.     [
  26.       {t:80, r:(cx-10), d:40, s:30, c:C[1]},
  27.       {t:60, r:(cx-20), d:40, s:80, c:C[2]},
  28.       {t:20, r:(cx-30), d:20, s:80, c:C[2]},
  29.     ],
  30.     [
  31.      {t:80, r:(cx-80),  d:40, s:40, c:C[4]},
  32.        {t:80, r:(cx-90),  d:20, s:40, c:C[4]},
  33.        {t:20, r:(cx-100), d:20, s:40, c:C[2]},
  34.        {t:40, r:(cx-110), d:20, s:40, c:C[2]},
  35.     ],
  36.     [
  37.      {t:60, r:(cx-160), d:40, s:20, c:C[2]},
  38.        {t:20, r:(cx-170), d:30, s:60, c:C[2]},
  39.        {t:40, r:(cx-180), d:40, s:60, c:C[2]},
  40.     ],
  41.     [
  42.      {t:40, r:(cx-230), d:40, s:20, c:C[5]},
  43.        {t:20, r:(cx-240), d:20, s:10, c:C[5]},
  44.     ],
  45.     [
  46.        {t:10, r:(cx-290), d:10, s:10, c:C[4]}
  47.     ]
  48.   ];
  49.   /* */
  50.   ctx.canvas.width = w;
  51.   ctx.canvas.height = h;
  52.   document.body.appendChild(ctx.canvas);
  53.   data.forEach(function(group) {
  54.     var ring = [];
  55.    
  56.     group.forEach(function(orbit, i) {
  57.       var total_particles, index;
  58.       
  59.       total_particles = orbit.t;
  60.       index = 0;
  61.       
  62.       for (; index < total_particles; index++) {
  63.         var radius, distance, speed, color, opacity;
  64.         radius = orbit.r;
  65.         distance = orbit.d;
  66.         speed = random() / orbit.s;
  67.         speed = i % 2 ? speed : speed * -1;
  68.         color = orbit.c;
  69.         opacity = orbit.o;
  70.         ring.push(new P(radius, distance, speed, color, opacity));
  71.         radius = distance = speed = color = opacity = null;
  72.       }
  73.     });
  74.    
  75.     rings.push(ring);
  76.   });
  77.   ringsLength = rings.length;
  78.   /* */
  79.   function P(radius, distance, speed, color) {
  80.     this.a = PI / 180;
  81.     this.d = distance;
  82.     this.d2 = (this.d * this.d);
  83.     this.x = cx + radius * cos(this.a);
  84.     this.y = cy + radius * sin(this.a);
  85.     this.c = color;
  86.     this.r = (random() * 8);
  87.     this.R = random() > 0.5 ? radius : radius - 5;
  88.     this.s = speed;
  89.     this.pos = random() * 360;
  90.   }
  91.   
  92.   function draw() {
  93.     var i, j, k, xd, yd, d, ring, ringLength, ringLength2, particle, p2;
  94.     ctx.beginPath();
  95.     ctx.globalCompositeOperation = "source-over";
  96.     ctx.rect(0, 0 , w, h);
  97.     ctx.fillStyle = "#151a28";
  98.     ctx.fill();
  99.     ctx.closePath();
  100.     for (i = 0; i < ringsLength; i++) {
  101.       ring = rings[i];
  102.       ringLength = ring.length;
  103.       ringLength2 = ringLength - 100;
  104.       
  105.       for (j = 0; j < ringLength; j++) {
  106.         particle = ring[j];
  107.         particle.x = cx + particle.R * sin(PI_HALF + particle.pos);
  108.         particle.y = cy + particle.R * cos(PI_HALF + particle.pos);
  109.         particle.pos += particle.s;
  110.         ctx.beginPath();
  111.         ctx.globalAlpha = 0.12;
  112.         ctx.globalCompositeOperation = "lighter";
  113.         ctx.fillStyle = particle.c;
  114.         ctx.arc(particle.x, particle.y, particle.r, PI * 2, false);
  115.         ctx.fill();
  116.         ctx.closePath();
  117.         for (k = 0; k < ringLength2; k++) {
  118.           p2 = ring[k];
  119.           yd = p2.y - particle.y;
  120.           xd = p2.x - particle.x;
  121.           d = ((xd * xd) + (yd * yd));
  122.           if (d < particle.d2) {
  123.             ctx.beginPath();
  124.             ctx.globalAlpha = 1;
  125.             ctx.lineWidth = lineWidth;
  126.             ctx.moveTo(particle.x, particle.y);
  127.             ctx.lineTo(p2.x, p2.y);
  128.             ctx.strokeStyle = p2.c;
  129.             ctx.stroke();
  130.             ctx.closePath();
  131.           }
  132.         }
  133.       }
  134.     }
  135.   }
  136.   function loop() {
  137.     draw();
  138.     requestAnimationFrame(loop);
  139.   }
  140.   loop();
  141.   
  142. })();
复制代码
以上就是本文的全部内容,盼望对各人的学习有所资助,也盼望各人多多支持草根技能分享。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作