粒子运动绘画动画效果-html代码-BFW代码库

粒子运动绘画动画效果

代码语言：html

所属分类：粒子

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title> - Flocked</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
  html, body {
  height: 100%;
}

body {
  overflow: hidden;
  background: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Calibri,Candara,Segoe,"Segoe UI",Optima,Arial,sans-serif;
  font-size: 14px;
}

.controls {
  position: fixed;
  top: 4px;
  left: 8px;
  color: #fff;
}

.line {
  display: block;
  padding: 6px 0;
}
.line span {
  display: inline-block;
  width: 100px;
  vertical-align: middle;
}

input[type="range"] {
  appearance: none;
  width: 150px;
  background: transparent;
  height: 12px;
  vertical-align: middle;
  color: #fff;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 8px;
  height: 8px;
  background: #333;
  border: 2px solid currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
input[type="range"]::-moz-range-thumb {
  appearance: none;
  width: 8px;
  height: 8px;
  background: #333;
  border: 2px solid currentColor;
  border-radius: 50%;
}
input[type="range"]::-ms-thumb {
  appearance: none;
  width: 8px;
  height: 8px;
  background: #333;
  border: 2px solid currentColor;
  border-radius: 50%;
  transform: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 1px;
  background: #fff;
  border: none;
}
input[type="range"]::-moz-range-track {
  width: 100%;
  height: 1px;
  background: #fff;
  border: none;
}
input[type="range"]::-ms-track {
  width: 100%;
  height: 1px;
  background: #fff;
  border: none;
}
input[type="range"]:focus {
  outline: none;
  color: #9df;
}

.selection {
  margin-left: -2px;
}

.selection button {
  background: none;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: currentColor;
  font: inherit;
  border-radius: 999px;
  margin: 0 2px;
  padding: 4px 12px;
  cursor: pointer;
}
.selection button:focus {
  background: rgba(255, 255, 255, 0.3);
  outline: none;
}

#c {
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.5);
}
</style>

</head>
<body translate="no">
<div class="controls">
<div class="line selection"></div>
<label class="line">
<span>Interval:</span><input type="range" id="interval" min="20" max="1000" value="300" step="10">
</label>
<label class="line">
<span>Speed:</span><input type="range" id="speed" min="20" max="500" value="100" step="5">
</label>
<label class="line">
<span>Speed factor:</span><input type="range" id="sf" min="1" max="50" value="15">
</label>
</div>
<canvas id="c" width="400" height="400"></canvas>

<script >
   

let c = document.getElementById('c');
let ctx = c.getContext('2d');
let size = { x: c.width, y: c.height };
let definition = 100;
let partSize = size.y / definition;
let picData = [];
let points = [];

async function load(url) {
  return new Promise((res, rej) => {
    let img = new Image();
    img.onload = () => res(img);
    img.onerror = rej;
    img.crossOrigin = 'anonymous';
    img.src = url;
  });
}
function getLightData(image, size) {
  if (!size) {
    size = { x: img.width, y: img.height };
  }
  .........完整代码请登录后点击上方下载按钮下载查看