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);
ctx.lineWidth = 60;
ctx.lineCap = "round";

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 = [];
var getColors = () => {
  let c = [];
  let colorCount = 4;
  let hue = getRandomInt(90, 360);
  for (let i = 0; i < colorCount; i++) {
    let hd = Math.round(240 / colorCount) * i + getRandomInt(-20, 20);
    let sat = 70 + getRandomInt(0, 31);
    let lum = 60 + getRandomInt(0, 11);
    c.splice(getRandomInt(0, c.length + 1), 0, "hsl(" + (hue + hd) % 360 + "," + sat + "%," + lum + "%)");
  }
  return c;
};

const getRandomSum = (c, s) => {
  let ra = [0];
  for (let i = 0; i < c - 1; i++) ra.push(Math.random());
  ra.push(1);
  ra.sort((a, b) => {return a - b;});
  let ra2 = new Array(c);
  for (let i = 0; i < c; i++) ra2[i] = Math.round(s * (ra[i + 1] - ra[i]));
  return ra2;
};

var Point = function () {
  this.x = 0;
  this.y = 0;
  this.d = false;
};

var segIntensity = getRandomInt(2, 20);
var PLine = function (idx, length) {
  this.to = Math.round(length * Math.random());
  this.t = this.to;
  this.tf = (0.5 + Math.random()) * [-1, 1][getRandomInt(0, 2)];
  this.oo = TP * Math.random();
  this.dash = getRandomSum(2 * getRandomInt(1, segIntensity), length);
  this.lw = 7 + 10 * idx;
  if (idx % 2) this.col = "black";else
  this.col = colors[idx / 2 % colors.length];
};

var shape = 0;
var shapes = [
{ "iz": [5, 5], "tlength": 2271 }, // distinct 2271
{ "iz": [5, 4], "tlength": 2309 }, // distinct 2309
{ "iz": [5, 3], "tlength": 2283 }, // distinct 2283
{ "iz": [3, 5], "tlength": 2283 }, // distinct 2283
{ "iz": [5, 2], "tlength": 2284 },
{ "iz": [4, 4], "tlength": 2271 },
{ "iz": [4, 3], "tlength": 2229 },
{ "iz": [3, 4], "tlength": 2309 },
{ "iz": [3, 3], "tlength": 2294 },
{ "iz": [3, 2], "tlength": 2269 },
{ "iz": [1, 3], "tlength": 2307 },
{ "iz": [1, 2], "tlength": 2296 },
{ "iz": [1, 1], "tlength": 2321 }];


const EDGE = CSIZE;

var pts = [];
var setPoints = () => {
  pts = [];
  let xs = [-33, 33, 100, 167, 233, 300, 367, 433]; // for (let i=0; i<8; i++) console.log(Math.round(-400/6/2+i*400/6))

  let ys = xs;
  for (let i = 0; i < COUNT + 1; i++) {
    pts[i] = [];
    for (let j = 0; j < COUNT + 1; j++) {
      pts[i][j] = new Point();
      pts[i][j].x = Math.round(xs[i]);
      pts[i][j].y = Math.round(ys[j]);
      if (i == 0 || j == 0 || i == COUNT || j == COUNT) pts[i][j].d = true;
    }
  }
};

var COUNT = 7; //getRandomInt(30,70);

var initLine = () => {
  let lidx = shapes[shape].iz[0];
  let lidy = shapes[shape].iz[1];
  let line = [];
  line[0] = [lidx, lidy];
  line[1] = [lidx + 1, lidy];
  line[2] =.........完整代码请登录后点击上方下载按钮下载查看