怎么在JavaScript中利用canvas實現(xiàn)一個圓形流水動畫

發(fā)布時間：2021-04-19 16:17:50 來源：億速云閱讀：251 作者：Leah 欄目：開發(fā)技術(shù)

這篇文章將為大家詳細(xì)講解有關(guān)怎么在JavaScript中利用canvas實現(xiàn)一個圓形流水動畫，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

JavaScript的特點

1.JavaScript主要用來向HTML頁面添加交互行為。 2.JavaScript可以直接嵌入到HTML頁面，但寫成單獨的js文件有利于結(jié)構(gòu)和行為的分離。 3.JavaScript具有跨平臺特性，在絕大多數(shù)瀏覽器的支持下，可以在多種平臺下運行。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="style.css" > -->
</head>
<body>
    <script src="main.js"></script>
</body>
</html>

main.js

/*
 * Noel Delgado - @pixelia_me
 */

(function() {
  var ctx, w, h, cx, cy, PI, PI_HALF, cos, sin, random, lineWidth, C, 
      rings, ringsLength, data;

  ctx = document.createElement('canvas').getContext('2d');
  w = 600;
  h = 600;
  cx = (w / 2);
  cy = (h / 2);
  rings = [];
  ringsLength = 0;
  
  PI = Math.PI;
  PI_HALF = PI / 2;
  cos = Math.cos;
  sin = Math.sin;
  random = Math.random;

  lineWidth = 0.2;
  C = ["#ABF8FF", "#E76B76", "#1D2439", "#4F3762", "#67F9FF", "#0C0F18"];
  
  data = [
    /* ring {t:total_particles, r:radius, d:distance, s:speed, c:color} */
    [
      {t:80, r:(cx-10), d:40, s:30, c:C[1]},
      {t:60, r:(cx-20), d:40, s:80, c:C[2]},
      {t:20, r:(cx-30), d:20, s:80, c:C[2]},
    ],
    [
     {t:80, r:(cx-80),  d:40, s:40, c:C[4]},
       {t:80, r:(cx-90),  d:20, s:40, c:C[4]},
       {t:20, r:(cx-100), d:20, s:40, c:C[2]},
       {t:40, r:(cx-110), d:20, s:40, c:C[2]},
    ],
    [
     {t:60, r:(cx-160), d:40, s:20, c:C[2]},
       {t:20, r:(cx-170), d:30, s:60, c:C[2]},
       {t:40, r:(cx-180), d:40, s:60, c:C[2]},
    ],
    [
     {t:40, r:(cx-230), d:40, s:20, c:C[5]},
       {t:20, r:(cx-240), d:20, s:10, c:C[5]},
    ],
    [
       {t:10, r:(cx-290), d:10, s:10, c:C[4]}
    ]
  ];
 
  /* */
  ctx.canvas.width = w;
  ctx.canvas.height = h;
  document.body.appendChild(ctx.canvas);

  data.forEach(function(group) {
    var ring = [];
    
    group.forEach(function(orbit, i) {
      var total_particles, index;
      
      total_particles = orbit.t;
      index = 0;
      
      for (; index < total_particles; index++) {
        var radius, distance, speed, color, opacity;

        radius = orbit.r;
        distance = orbit.d;
        speed = random() / orbit.s;
        speed = i % 2 ? speed : speed * -1;
        color = orbit.c;
        opacity = orbit.o;

        ring.push(new P(radius, distance, speed, color, opacity));

        radius = distance = speed = color = opacity = null;
      }
    });
    
    rings.push(ring);
  });

  ringsLength = rings.length;
 
  /* */
  function P(radius, distance, speed, color) {
    this.a = PI / 180;
    this.d = distance;
    this.d2 = (this.d * this.d);
    this.x = cx + radius * cos(this.a);
    this.y = cy + radius * sin(this.a);
    this.c = color;
    this.r = (random() * 8);
    this.R = random() > 0.5 ? radius : radius - 5;
    this.s = speed;
    this.pos = random() * 360;
  }
  
  function draw() {
    var i, j, k, xd, yd, d, ring, ringLength, ringLength3, particle, p2;

    ctx.beginPath();
    ctx.globalCompositeOperation = "source-over";
    ctx.rect(0, 0 , w, h);
    ctx.fillStyle = "#151a28";
    ctx.fill();
    ctx.closePath();

    for (i = 0; i < ringsLength; i++) {
      ring = rings[i];
      ringLength = ring.length;
      ringLength3 = ringLength - 100;
      
      for (j = 0; j < ringLength; j++) {
        particle = ring[j];

        particle.x = cx + particle.R * sin(PI_HALF + particle.pos);
        particle.y = cy + particle.R * cos(PI_HALF + particle.pos);
        particle.pos += particle.s;

        ctx.beginPath();
        ctx.globalAlpha = 0.12;
        ctx.globalCompositeOperation = "lighter";
        ctx.fillStyle = particle.c;
        ctx.arc(particle.x, particle.y, particle.r, PI * 2, false);
        ctx.fill();
        ctx.closePath();

        for (k = 0; k < ringLength3; k++) {
          p2 = ring[k];

          yd = p2.y - particle.y;
          xd = p2.x - particle.x;
          d = ((xd * xd) + (yd * yd));

          if (d < particle.d2) {
            ctx.beginPath();
            ctx.globalAlpha = 1;
            ctx.lineWidth = lineWidth;
            ctx.moveTo(particle.x, particle.y);
            ctx.lineTo(p2.x, p2.y);
            ctx.strokeStyle = p2.c;
            ctx.stroke();
            ctx.closePath();
          }
        }
      }
    }
  }

  function loop() {
    draw();
    requestAnimationFrame(loop);
  }

  loop();
  
})();

關(guān)于怎么在JavaScript中利用canvas實現(xiàn)一個圓形流水動畫就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

怎么在JavaScript中利用canvas實現(xiàn)一個圓形流水動畫

JavaScript的特點

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽