Question

我的想法是使用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

他们是如何做到的？

Answer 1

如果您的目的是显示一个用于设置各个像素的图像，那么使用canvas元素可以获得更好的效果。

这是一个小小的演示：

＆＃13;

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.

＆＃13;

<canvas id="canvas" width="500" height="500"></canvas>

＆＃13;

您的PHP脚本应设置canvas元素（HTML）的width和height属性，并提供要传递给setPixel()的坐标和相应的颜色代码。显然，让PHP以简洁的格式提供信息以最大限度地减少流量非常重要。

如果您的数据库可以存储位图格式，那么您可以使用<img src="...">元素加载它并完成。接下来最好的是你的数据库将数据存储为向量，你只需绘制一些线条和矩形，这比需要通过和传递更少资源。绘制每个像素。

大网格，最小1000000 div

1 个答案: