本文实例为大家分享了canvas实现圆形流水动画的具体代码,供大家参考,具体内容如下

前言

特效展示

效果展示

代码展示

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, ringLength2, 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;
      ringLength2 = 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 < ringLength2; 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();
  
})();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持Devmax。

js canvas实现圆形流水动画的更多相关文章

  1. 微信小程序canvas实现水平、垂直居中效果

    这篇文章主要介绍了小程序中canvas实现水平、垂直居中效果,本文图文实例代码相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  2. H5最强接口之canvas实现动态图形功能

    这篇文章主要介绍了H5最强接口之canvas实现动态图形功能,需要的朋友可以参考下

  3. Canvas高级路径操作之拖拽对象的实现

    这篇文章主要介绍了Canvas高级路径操作之拖拽对象的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  4. canvas像素点操作之视频绿幕抠图

    这篇文章主要介绍了canvas像素点操作之视频绿幕抠图的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  5. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  6. canvas绘制视频封面的方法

    这篇文章主要介绍了canvas绘制视频封面的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. HTML实现代码雨源码及效果示例

    这篇文章主要介绍了HTML实现代码雨源码及效果示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  8. 详解使用双缓存解决Canvas clearRect引起的闪屏问题

    这篇文章主要介绍了详解使用双缓存解决Canvas clearRect引起的闪屏问题的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  9. canvas实现按住鼠标移动绘制出轨迹的示例代码

    本篇文章主要介绍了canvas实现按住鼠标移动绘制出轨迹的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. 用canvas做一个DVD待机动画的实现代码

    这篇文章主要介绍了用canvas做一个DVD待机动画的实现代码的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部