画布生成最大调用堆栈的问题

Question

我正在制作一个自动生成行星的脚本，例如，请参见codepen。但我遇到的问题是我想让它不那么像素化，如果我将图块设为 70 * 70 并将图块大小设为 10 * 10 像素，我会遇到一些问题，它可以正常工作。但我想把它设置为像瓷砖 360 * 360 和大小为 1 或 2 像素的东西。但是当我尝试这样做时，我得到了最大调用堆栈错误。所以我尝试使用requestAnimationFrame但加载需要很长时间有没有办法加快这个过程？var tileNum = 0;    var tiles;    var colorsLand;    var colorsWater;    var size = 360;    var tileSize = 2;    var canvas = document.getElementById("canvas");    var ctx = canvas.getContext("2d");    window.onload = function () {        generatePlanet();    }    function generatePlanet() {        tileNum = 0;        tiles = [{ x: 0, y: 0, land: false }];        //Retrive colors                colorsLand = interpolateColors("rgb(" + getColor(true) + ")", "rgb(" + getColor(true) + ")", 6000);        colorsWater = interpolateColors("rgb(" + getColor(false) + ")", "rgb(" + getColor(false) + ")", 6000);        //Creates a array of my tiles and sets either water or land to them and calculates the % of being water/land        for (var i = 0; i < (size * size); i++) {            var currentTile = tiles[tiles.length - 1];            if (currentTile.x <= (size - 1)) {                var isLand = false;                if (currentTile.land == true || tiles.length > size && tiles[tiles.length - size].land == true) {                    isLand = (Math.floor(Math.random() * 100) + 1) > 35;                }                else if (currentTile.land == true || tiles.length > size &&                    (tiles[tiles.length - 1].land == true ||                        tiles[tiles.length - size].land == true)) {                    isLand = (Math.floor(Math.random() * 100) + 1) > size;                }                else {                    isLand = (Math.floor(Math.random() * 100) + 1) > 99;                }                tiles.push({ x: currentTile.x + 1, y: currentTile.y, land: isLand });            }            else {                tiles.push({ x: 0, y: currentTile.y + 1, land: isLand });            }        }        drawPlanet()    }