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&qu.........完整代码请登录后点击上方下载按钮下载查看