canvas实现彩色线条绘制漩涡动画效果代码-html代码-BFW代码库

canvas实现彩色线条绘制漩涡动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现彩色线条绘制漩涡动画效果代码，可修改参数。

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body {
  font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
  background-color: #000;
  margin: 0;
  padding: 0;
  border-width: 0;
  cursor: pointer;
  overflow: hidden;
}

input {
  caret-color: auto;
}

#menu {
  font-size: 80%;
  margin: 0;
  padding: 5px;
  position: absolute;
  left: 5px;
  top: 5px;
  border-radius: 10px;
  background-color: rgba(255, 255, 128, 0.9);
  color: black;
  z-index: 10;
}

#menu.hidden #showhide {
  display: none;
}

#controls {
  margin-top: 0px;
  margin-bottom: 0px;
  text-align: right;
}

#controls:hover {
  background-color: rgba(255, 200, 128, 0.9);
}

#menu button {
  margin-right: 5px;
  margin-left: 5px;
  border-radius: 5px;
}

#menu .center {
  text-align: center;
}

#colorspan {
  margin: 0 5px;
  padding: 0 2em;
  border: 1px solid black;
}

canvas#displaycolor {
  width: 5em;
  height: 1.25em;
  border: 1px solid black;
}
</style>

  
  
  
</head>

<body translate="no">
  <div id="menu">
  <p id="controls">close controls</p>
  <div id="showhide">
    <hr>
    <p>field type: <select id="mode">
        <option value="0">parallel</option>
        <option value="1">mixed</option>
        <option value="2">perpendicular</option>
        <option value="3">noise</option>
        <option value="4" selected>eddies</option>
      </select></p>
    <hr>
    <p>paint mode: <select id="paintmode">
        <option value="0">automatic</option>
        <option value="1">manual</option>
      </select></p>
    <p>color choice mode: <select id="colorchoicemode">
        <option value="0">automatic</option>
        <option value="1">manual</option>
      </select></p>
    <p>color: <input type="color" id="color" value="#ffa000"></p>
    <p>sat/lum randomness: </p>
    <p><input type="range" min=0 max=1 step="any" value=0.5 id="fibrosity"> <canvas id="displaycolor"></canvas></p>
    <p>line width: <input type="range" min=0.1 max=4 step="any" value=3 id="lwidth"></p>
    <hr>
    <p class="center"><button type="button" id="clear">new</button> <button type="button" id="clearsamefield">new -
        same field</button></p>
  </div> <!-- showhide -->
</div> <!-- menu -->
  
      <script >
"use strict";

const NB_BARS = 10;
const NB_EDDIES = 7;
const BASE_SPEED = 2; // for bars only

const MAX_LIFETIME = 5000;

let canv, ctx; // canvas and context
let maxx, maxy; // canvas dimensions
let lRef;
let perpMode;
let mouse = {};

let fx, speed, perNoise; // for noise field
let bars, eddies;
let fieldFunction;
let colorizer, filler;

// for animation
let messages;
// user interface
let ui, uiv;

// shortcuts for Math.
const mrandom = Math.random;
const mfloor = Math.floor;
const mround = Math.round;
const mceil = Math.ceil;
const mabs = Math.abs;
const mmin = Math.min;
const mmax = Math.max;

const mPI = Math.PI;
const mPIS2 = Math.PI / 2;
const mPIS3 = Math.PI / 3;
const m2PI = Math.PI * 2;
const m2PIS3 =.........完整代码请登录后点击上方下载按钮下载查看