猿问

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

我正在制作一个自动生成行星的脚本,例如,请参见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()

    }


Helenr
浏览 152回答 1
1回答
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答