js canvas实现圆形流水动画

2024-12-03 00:09:31

本文实例为大家分享了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();

})();

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

javascript动画之圆形运动,环绕鼠标运动作小球

代码如下: 复制代码代码如下: <script type="text/javascript"> var ball; var mouseX = 100; var mouseY = 100; var angle = 0; var radius = 50; function run(){ if(ball === undefined){ ball = document.createElement("span"); ball.style.position = &
Js文字背景行如流水特效

行如流水的Js文字背景特效 var message="我们是一个专业的收集各类脚本学习资料的网站 jb51.net" var n=0; if (document.all){ document.write('') for (m=0;m'+message.charAt(m)+'') document.write('') var tempref=document.all.neonlight } else document.write(message) function neon(){ if
js canvas实现圆形流水动画

本文实例为大家分享了canvas实现圆形流水动画的具体代码,供大家参考,具体内容如下前言特效展示效果展示代码展示 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&
js Canvas绘制圆形时钟效果

本文实例为大家分享了js Canvas圆形时钟的具体实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Canvas Clock</title> <style type="text/css"> div{ text-align: center; margin-top: 250px
js Canvas实现圆形时钟教程

阅读本文需要一点关于canvas基本用法的基础,本文实例为大家分享了HTML5 Canvas实现圆形时钟简易教程第一步:新建一个最简单的html文件,并且在<body>标签中定义元素canvas. canvas.html <html> <head> <title>Canvas clock tutorial</title> </head> <body> <canvas id="clock" wid
js Canvas绘制圆形时钟教程

本文实例为大家分享了Canvas绘制圆形时钟的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas-clock</title> </head> <body> <canvas id="canvas" width=&
JS Canvas接口和动画效果大全

概述 <canvas>元素用于生成图像.它本身就像一个画布,JavaScript通过操作它的 API,在上面生成图像.它的底层是一个个像素,基本上<canvas>是一个可以用JavaScript操作的位图(bitmap). 它与 SVG 图像的区别在于,<canvas>是脚本调用各种方法生成图像,SVG 则是一个 XML 文件,通过各种子元素生成图像. 使用 Canvas API 之前,需要在网页里面新建一个<canvas>元素. <canvas id
JS+canvas绘制的动态机械表动画效果

本文实例讲述了JS+canvas绘制的动态机械表动画效果.分享给大家供大家参考,具体如下: 先来看看运行效果: 完整实例代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net canvas时钟</title> <style> canvas { border: 1px
js+html5实现canvas绘制圆形图案的方法

本文实例讲述了js+html5实现canvas绘制圆形图案的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not sup
js canvas实现写字动画效果

本文实例为大家分享了js canvas实现写字动画效果展示的具体代码,供大家参考,具体内容如下页面html: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>学写一个字</title> <script src="jquery-2.1.3.min.js" type="t
JS+Canvas实现满屏爱心和文字动画的制作

目录介绍步骤介绍 <canvas> 最早由 Apple 引入 WebKit,用于 Mac OS X 的 Dashboard,随后被各个浏览器实现.如今,所有主流的浏览器都支持它.Canvas API 提供了一个通过 JavaScript 和 HTML 的 <canvas> 元素来绘制图形的方式.它可以用于动画.游戏画面.数据可视化.图片编辑以及实时视频处理等方面.Canvas 适合绘制大数据量图形元素的图表(如热力图.地理坐标系或平行坐标系上的大规模线图或散点图等),也适合实
js+canvas实现网站背景鼠标吸附线条动画

本文实例为大家分享了js+canvas实现网站背景鼠标吸附线的具体代码,供大家参考,具体内容如下完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> ! function

js canvas实现圆形流水动画

前言

效果展示

代码展示

相关推荐

随机推荐