canvas线条曲线变换动画效果代码-html代码-BFW代码库

canvas线条曲线变换动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas线条曲线变换动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  



</head>

<body  >
  

  
      <script >
"use strict"; // Paul Slaymaker, paul25882@gmail.com
const body = document.getElementsByTagName("body").item(0);
body.style.background = "#000";
const TP = 2 * Math.PI;
const CSIZE = 400;

const ctx = (() => {
  let d = document.createElement("div");
  d.style.textAlign = "center";
  body.append(d);
  let c = document.createElement("canvas");
  c.width = c.height = 2 * CSIZE;
  d.append(c);
  return c.getContext("2d");
})();
ctx.translate(CSIZE, CSIZE);

onresize = () => {
  let D = Math.min(window.innerWidth, window.innerHeight) - 40;
  ctx.canvas.style.width = D + "px";
  ctx.canvas.style.height = D + "px";
};

const getRandomInt = (min, max, low) => {
  if (low) {
    return Math.floor(Math.random() * Math.random() * (max - min)) + min;
  } else {
    return Math.floor(Math.random() * (max - min)) + min;
  }
};

var colors = [];
const setColors = () => {
  let hues = [];
  hues[0] = (getRandomInt(-200, 40) + 360) % 360;
  hues[1] = (hues[0] + getRandomInt(60, 90)) % 360;
  //console.log(hues[0]+" "+hues[1]);
  if (Math.random() < 0.5) hues.reverse();
  colors[0] = "hsl(" + hues[0] + ",100%,20%)";
  colors[1] = "hsl(" + hues[1] + ",100%,68%)";
};

var rotateLines = ic => {
  let rot = rotation;
  for (let i = 0; i < C; i++) {
    if (i % 2) lines[i].rotate(0.1);else
    lines[i].rotate(-0.1);
  }
};

var Line = function (idx) {
  this.a = idx * TP / C + (C / 4 - 1) * TP / C / 2;
  this.dp1 = new DOMPoint();
  this.dp2 = new DOMPoint();
  this.rotate = z => {
    if (z == 0) return;
    let dm2 = new DOMMatrix([Math.cos(z), Math.sin(z), -Math.sin(z), Math.cos(z), this.mx, this.my]);
    let dm3 = dm2.multiply(this.dm1);
    this.dp1 = this.dp1.matrixTransform(dm3);
    this.dp2 = this.dp2.matrixTransform(dm3);
  };
  this.setLine = () => {
    let f = C > 8 ? idx % 4 < 2 ? F : F2 : F;
    let r = C > 8 ? idx % 4 < 2 ? R : R2 : R;
    this.dp1.x = r * Math.cos(this.a - f);
    this.dp1.y = r * Math.sin(this.a - f);
    this.dp2.x = r * Math.cos(this.a + f);
    this.dp2.y = r * Math.sin(this.a + f);
    this.mx = (this.dp1.x + this.dp2.x) / 2;
    this.my = (this.dp1.y + this.dp2.y) / 2;
    this.dm1 = new DOMMatrix([1, 0, 0, 1, -this.mx, -this.my]);
  };
};

var lines = new Array(32);
for (let i = 0; i < 32; i++) lines[i] = new Line(i);

var C = 8;
var F = 0.2;
var F2 = 0.2;
var R = 300 + 60 * Math.random();
var R2 = R - 80 * Math.random();

var getPath = () => {
  let p = new Path2D();
  p.moveTo(lines[0].mx, lines[0].my);
  for (let i = 0; i < skipLevel * C; i += skipLevel) {
    let i0 = i % C;
    let i1 = (i + skipLevel) % C;
    p.bezierCurveTo(lines[i0].dp2.x, lines[i0].dp2.y, lines[i1].dp1.x, lines[i1].dp1.y, lines[i1].mx, lines[i1].my);
  }
  return p;
};

var skipLevel = 1;
const rSet = [{ "c": 4, "s": 1 }, { "c": 6, "s": 1 }, { "c": 8, "s": 1 }, { "c": 8, "s": 3 }, { "c": 12, "s": 1 }, { "c": 12, "s": 5 }, { "c": 16, "s": 1 }, { "c": 16, "s": 3 }, { "c": 16, "s": 5 }, { "c": 16, "s": 7 }, { "c": 3, "s": 1 }, { "c": 5, "s": 2 }, { "c": 20, "s": 1 }, { "c": 20, "s": 3 }, { "c": 20, "s": 7 }, { "c": 20, "s": 9 }, { "c": 24, "s": 1 }, { "c": 24, "s": 5 }, { "c": 24, "s": 7 }, { "c": 24, "s": 11 }, { "c": 28, "s": 1 }, { "c": 28, "s": 3 }, { "c": 28, ".........完整代码请登录后点击上方下载按钮下载查看