canvas彩色线条交织动画效果代码-html代码-BFW代码库

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 = [];
        this.controls = {
            c1x: 0,
            c1y: 0,
            c2x: 0,
            c2y: 0,
            // readonly
            c1xIncrease: 0.005,
            c2xIncrease: 0.001,
            c1xCurr: Math.random() * 360,
            c2xCurr: Math.random() * 360,
            c1yIncrease: 0.005,
            c1yCurr: Math.random() * 360,
            c2yIncrease: 0.001,
            c2yCurr: Math.random() * 360,
        };
        this.noise = (x) => {
            return ((noise1d(x) * 2 - 1) / 4) * 5;
        };
        document.body.appendChild(this.canvas);
        this.setCanvasSize();
        window.addEventListener('resize', this.setCanvasSize.bind(this));
    }
    init() {
        for (let i = 0; i < this.lineLength; i++) {
            this.lines.push({
                startX: 0,
                startY: getRandomNumberInRange(0, window.innerHeight),
                endX: window.innerWidth,
                endY: getRandomNumberInRange(0, window.innerHeight),
                color: `rgb(${getRandomNumberInRange.........完整代码请登录后点击上方下载按钮下载查看