canvas彩色线条交织动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas彩色线条交织动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
canvas {
padding-top: 0px !important;
margin-top: 0px !important;
}
body {
margin:0px;
}
</style>
</head>
<body >
<script >
// 定义一个函数,用于获取在范围 [a, b] 内的随机整数
function getRandomNumberInRange(a, b) {
const start = Math.min(a, b);
const end = Math.max(a, b);
const randomNumber = Math.floor(Math.random() * (end - start + 1)) + start;
return randomNumber;
}
// 定义一个函数,用于将一个范围内的值映射到另一个范围
function map(value, start1, stop1, start2, stop2) {
const outgoing = start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
return outgoing;
}
// 定义 PerlinNoise 类
class PerlinNoise {
constructor(rand = Math.random) {
let perm = new Int8Array(257);
for (let i = 0; i < 256; i++) {
perm[i] = i & 1 ? 1 : -1;
}
for (let i = 0; i < 256; i++) {
let j = (rand() * 4294967296) & 255;
[perm[i], perm[j]] = [perm[j], perm[i]];
}
perm[256] = perm[0];
function noise1d(x) {
let x0 = x | 0;
let x1 = x - x0;
let xi = x0 & 255;
let fx = (3 - 2 * x1) * x1 * x1;
let a = x1 * perm[xi];
let b = (x1 - 1) * perm[xi + 1];
return a + fx * (b - a);
}
function noise(x) {
let sum = 0;
sum += (1 + noise1d(x)) * 0.25;
sum += (1 + noise1d(x * 2)) * 0.125;
sum += (1 + noise1d(x * 4)) * 0.0625;
sum += (1 + noise1d(x * 8)) * 0.03125;
return sum;
}
this.noise = noise;
}
}
const noise1d = new PerlinNoise().noise;
class App {
constructor() {
this.canvas = document.createElement('canvas');
this.ctx = this.canvas.getContext('2d');
this.size = {
w: 0,
h: 0,
cx: 0,
cy: 0,
};
this.lineLength = 40;
this.lines = [];
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0