当前位置：首页 > VUE

vue实现柏林噪音

2026-03-08 07:28:40VUE

柏林噪声简介

柏林噪声（Perlin Noise）是一种由Ken Perlin开发的梯度噪声算法，常用于生成自然纹理、地形、云层等随机但连续的图案。与单纯随机数不同，柏林噪声具有平滑过渡的特性。

Vue中实现柏林噪声

安装依赖

若需在Vue项目中使用柏林噪声算法，可通过npm安装噪声库：

vue实现柏林噪音

npm install noisejs

基础实现代码

以下示例展示如何在Vue组件中生成2D柏林噪声并渲染到Canvas：

<template>
  <canvas ref="canvas" width="500" height="500"></canvas>
</template>

<script>
import { createNoise2D } from 'simplex-noise';

export default {
  mounted() {
    this.generateNoise();
  },
  methods: {
    generateNoise() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      const noise2D = createNoise2D();
      const size = 500;
      const scale = 0.02;

      for (let x = 0; x < size; x++) {
        for (let y = 0; y < size; y++) {
          const value = noise2D(x * scale, y * scale);
          const color = Math.floor((value + 1) * 128);
          ctx.fillStyle = `rgb(${color}, ${color}, ${color})`;
          ctx.fillRect(x, y, 1, 1);
        }
      }
    }
  }
};
</script>

动态噪声动画

通过requestAnimationFrame实现动态噪声效果：

vue实现柏林噪音

methods: {
  animateNoise() {
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');
    const noise2D = createNoise2D();
    const size = 500;
    const scale = 0.02;
    let z = 0;

    const animate = () => {
      for (let x = 0; x < size; x++) {
        for (let y = 0; y < size; y++) {
          const value = noise2D(x * scale, y * scale, z);
          const color = Math.floor((value + 1) * 128);
          ctx.fillStyle = `rgb(${color}, ${color}, ${color})`;
          ctx.fillRect(x, y, 1, 1);
        }
      }
      z += 0.01;
      requestAnimationFrame(animate);
    };
    animate();
  }
}

彩色噪声实现

将噪声值映射到RGB通道生成彩色效果：

ctx.fillStyle = `rgb(
  ${Math.floor((noise2D(x * scale, y * scale) + 1) * 128)},
  ${Math.floor((noise2D(x * scale + 100, y * scale + 100) + 1) * 128)},
  ${Math.floor((noise2D(x * scale + 200, y * scale + 200) + 1) * 128)}
)`;