javascript 大网格,最少1000000个分区

5kgi1eie  于 2022-12-21  发布在  Java
关注(0)|答案(1)|浏览(105)

我的想法是使用php或js创建大量的div(我从昨天开始写js)。
所以我自己的任务是用php或者js或者两者都用来生成一个div网格。目前为止的想法是用一个普通的div作为行,里面有小的单元格。首先我用php变量来确定行的长度,然后我定义行数(目前为止很容易)。当我生成网格时,我的问题来了。只用php非常慢,所以我决定也用js。我第一次尝试的结果是把时间减少了一半,但是仍然很慢。所以我问自己有没有办法来分配js的工作?嗯,是的......当然是使用函数!所以我做了一个叫做sector的函数,并且试着调用它。它工作了,但是仍然太慢。那么做这样一件事的最佳实践是什么呢?

<?php
$rowWidth = 200;                                  // width in pixels
$rowHeight = 100;                                 // height in pixels
$boxWidth = 1;                                  // box width in pixels
$boxHeight = 1;                                 // box height in pixels
?>
<body>
    <script>
    function sector(sector) {
        for (var i = 0*sector; i < (<?php echo $rowHeight / 100 ?> + 100*sector); i++) { // trying to manage sectors
            var div = document.createElement('div');
            // set style
            div.style.width = '<?php echo $rowWidth ?>';
            div.style.height = '<?php echo $boxHeight ?>';
            div.style.background = 'red';
            div.setAttribute('class', 'row'); // and make a class for future css (for now using inline css set by js)
            div.setAttribute('id', 'row'+i); // and make an id selector
            document.body.appendChild(div);
            for (var e = 0; e < <?php echo $rowWidth ?>; e++) {
                var box = document.createElement('div');
                // set style
                box.style.width = '<?php echo $boxWidth ?>';
                box.style.height = '<?php echo $boxHeight ?>';
                box.style.float = 'left';
                box.style.background = 'pink';
                box.setAttribute('class', 'box'); // and make a class for future css (for now using inline css set by js)
                box.setAttribute('id', 'box'+e); // and make an id selector
                document.getElementById('row'+i).appendChild(box); // joining my row
            }
        }
    }
    <?php for ($sector=0; $sector < ($rowWidth / 100) ; $sector++) { ?>
        //calling all sectors, calling all sectors... please report
        sector(<?php echo $sector+1 ?>);
    <?php } ?>
    </script>
</body>

**更新:**这看起来与我的想法相似。

http://www.businessinsider.com/reddit-place-april-fools-experiment-creates-pixel-art-final-version-2017-4
他们怎么做到的?

jogvjijk

jogvjijk1#

如果您的目的是显示一个图像,其中您将设置各个像素,那么您将获得更好的结果与画布元素。
下面是一个小演示:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);

function draw() {
    ctx.putImageData(imgData, 0, 0);
}

function setPixel(x, y, red, green, blue) {
    var offset = (y * canvas.width + x) * 4;
    imgData.data[offset] = red;
    imgData.data[offset+1] = green;
    imgData.data[offset+2] = blue;
    imgData.data[offset+3] = 255; // opacity
}

// Example: set some green pixels along a line
for (var i = 0; i < 200; i++) {
    setPixel (i, i >> 2, 0, 128, 0);
}
draw(); // display the result.
<canvas id="canvas" width="500" height="180"></canvas>

PHP脚本应该设置canvas元素(HTML)的width和height属性,并提供坐标和相应的颜色代码传递给setPixel()。显然,让PHP以简洁的格式提供这些信息以最小化流量是很重要的。
如果你的数据库可以存储位图格式,那么你可以只加载一个<img src="...">元素就可以了,其次最好的是你的数据库将数据存储为矢量,你只需要画一些线和矩形,这比传递和绘制每个像素需要的资源要少。

相关问题