因为你算法复杂度过高
你一共要调用256*256次perlin
结果每次调用perlin都要调用9次Noise
每个Noise里面还有数个位运算, 要知道js的位运算很弱的..
除此之外你还要画256*256条线...
最终导致算一次耗时过长(你打开资源管理器看看你浏览器cpu在打开这个页面後就飈高..
稍稍优化下就好
<html><title>Perlin</title>
<body>
<canvas id="canv">浏览器不支持canvas</canvas>
<br>
<script>
~function()
{
var floor = Math.floor,
Seed = 11223344,
Canvas = document.getElementById('canv'),
P = Canvas.getContext('2d'),
Size = 256,
Color = [],
Image = P.createImageData(Size,Size),
T,F,Fa
Canvas.width = Canvas.height = Size
for (F = -1F <= Size++F)
{
Color.push(T = Array(Size + 2))
for (Fa = -1Fa <= Size++Fa)
T[Fa + 1] = ((((Seed * (F * Fa + 10 * F + Fa) + 1) ^ 122233) >> 16) & 0x7fff) % 256
}
F = Fa = 1
for (T = 0T < Image.data.length)
{
Image.data[T++] = Image.data[T++] = Image.data[T++] = floor
(
(Color[F - 1][Fa - 1] + Color[F + 1][Fa - 1] + Color[F - 1][Fa + 1] + Color[F + 1][Fa + 1]) / 16 +
(Color[F - 1][Fa] + Color[F + 1][Fa] + Color[F][Fa - 1] + Color[F][Fa + 1]) / 8 +
Color[F][Fa] / 4
)
Image.data[T++] = 255
++Fa > Size && (Fa = 1,++F)
}
P.putImageData(Image,0,0)
}()
</script>
</body>
</html>
解决方法，下面三个必填
module.exports = {
lintOnSave: false, //如果为false，就是取消eslint规则的检查
publicPath: "./",
assetsDir: "static",
outputDir: 'dist',
}
