极移运动

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

let rid = null;
const ctx = cvs.getContext("2d");

let size = Math.min(window.innerWidth, window.innerHeight);
const N = 6;
let cw = (cvs.width = size);
let ch = (cvs.height = size);
let R = size / N;

let A = 0;

let cells = [];

class Cell {
  constructor(x, y, n, d) {
    this.R = R / 2;
    this.r = this.R * 0.8;
    this.x = x;
    this.y = y;
    this.n = n;
    this.d = d;
    if (d > 0 && n > 0) {
      this.k = this.n / this.d;
    }
    this.cx = this.x + this.R;
    this.cy = this.y + this.R;

this.points = [];
  }

draw(_x, _y, A) {
    let a = this.d * A;
    ctx.save();
    ctx.translate(this.cx, this.cy);
    ctx.rotate(-Math.PI / 2);

//draw the curve
    if (this.k) {
      ctx.lineWidth = 1;
      ctx.beginPath();
      for (let _a = 0; _a < this.d * 2 * Math.PI; _a += 0.01) {
        let x = this.r * Math.cos(_a * this.k) * Math.cos(_a);
        let y = this.r * Math.cos(_a * this.k) * Math.sin(_a);
        ctx.lineTo(x, y);
      }
      ctx.closePath();
      ctx.strokeStyle = "#444";
      ctx.stroke();

//--------------

ctx.beginPath();
      ctx.moveTo(this.points.x, this.points.y);
      this.points.map((p) => {
        ctx.lineTo(p.x, p.y);
      });
      ctx.strokeStyle = "aliceblue";
      ctx.stroke();
    }

//draw the rod
    let x1 = this.r * Math.cos(a);
    let y1 = this.r * Math.sin(a);
    let x2 = this.r * Math.cos(a + Math.PI);
    let y2 = this.r * Math.sin(a + Math.PI);
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.lineWidth = size / 100;
    ctx.lineCap = "round";
    ctx.strokeStyle = grd(x1, y1, x2, y2);
    ctx.stroke();

//draw the thumb
    if (this.k) {
      drawthumb(_x, _y);
    } else {
      if (this.n == 0) {
        drawthumb(x1, y1);
      } else {
        drawthumb(this.r * Math.cos(this.n * A), 0);
      }
    }

ctx.restore();
  }

update(A) {
    let a = this.d * A;
    let _x = this.r * Math.cos(a * this.k) * Math.cos(a);
    let _y = this.r * Math.cos(a * this.k) * Math.sin(a);
    //build the array of points
    if (a < this.d * 2 * Math.PI) {
      this.points.push({ x: _x, y: _y });
    } else {
      this.points = [];
    }
    this.draw(_x, _y, A);
  }
}

function Draw() {
  rid = window.requestAnimationFrame(Draw);
  ctx.clearRect(0, 0, cw, ch);
  A <= 2 * Math.PI ? (A += 0.01) : (A = 0);

cells.map((c) => {
    c.update(A);
  });
}

function drawthumb(x, y) {
  ctx.beginPath();
  ctx.arc(x, y, size / 100, 0, 2 * Math.PI);
  ctx.strokeStyle = "black";
  ctx.fillStyle = "aliceblue";
  ctx.lineWidth = 1;
  ctx.fill();
  ctx.stroke();
}

function grd(x1, y1, x2, y2) {
  let g = ctx.createLinearGradient(x1, y1, x2, y2);
  g.addColorStop(0.3, "#ab5a21");
  g.addColorStop(0.5, "#fff");
  g.addColorStop(0.7, "#ab5a21");
  return g;
}

function Init() {
  if (rid) {
    window.cancelAnimationFrame(rid);
    rid = null;
  }
  size = Math.min(window.innerWidth, window.innerHeight);
  cw = cvs.width = size;
  ch = cvs.height = size;

R = size / N;

cells = [];
  let n = 0;
  for (let y = 0; y < size; y += R) {
    let d = 0;
    for (let x = 0; x < size; x += R) {
      cells.push(new Cell(x, y, d, n));
      d++;
    }
    n++;
  }

Draw();
}

window.setTimeout(function () {
  Init();
  window.addEventListener("resize", Init, false);
}, 15);

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