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;
  caret-color: transparent;
}

input[type=text] {
  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;

}

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

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

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

#colorspan.colorful {
  background: linear-gradient(to right, orange 20%, green 21%, green 40%, fuchsia 41%, fuchsia 60%,yellow 61%, yellow 80%, blue 81%, blue);
}
</style>



</head>

<body >
  <div id ="menu">
<p id="controls">close controls</p>
<div id="showhide">
<hr>
<p>speed field :</p>
<p><input type="range" min=30 max=150 step="any" value=70 id="wavelength"> wavelength</p>
<p><input type="range" min=0 max=1 step="any" value=0.5 id="amplitude"> amplitude</p>
<hr>
<p>particles :</p>
<p><input type="range" min=0 max=400 step="any" value=180 id="hue"> color <span id=colorspan></span></p>
<p><input type="range" min=1 max=30 step="any" value=10 id="diam"> diameter</p>
<p><input type="checkbox" id="randomdiam"> random diameter</p>
<p><input type="checkbox" id="ftl" checked> from top left</p>
<p><input type="checkbox" id="fbr"> from bottom right</p>
<hr>
<p class=center><button id=pattern>Draw pattern</button></p>
<p id="patternstatus">In progress. Please wait</p>
<hr>
<p>click canvas to reset</p>
</div> <!-- showhide -->
</div> <!-- menu -->

  
      <script >
"use strict";

window.addEventListener("load", function () {

  const speed = 3; // intensity of field at the triangle vertices
  const nbParticles = 100;
  const.........完整代码请登录后点击上方下载按钮下载查看