如何用数字数据填充HTML画布?是否有更好的替代方案来创建可用于Conway'《生命的游戏》

How to populate an HTML canvas with numeric data? Is there a better alternative to create a text grid that can be used for Conway's Game of Life?

本文关键字：生命的游戏 用于 创建 方案 Conway 填充 HTML 数据 数字 何用 画布      更新时间：2023-09-26

我创建了一个HTML5画布，并使用stroke（）方法，最终得到了一个网格。下面是我使用的代码：

我现在确实看到了一个网格显示。然而，我正试图弄清楚如何将数字数据添加到每个网格列中？或者，除了使用HTML5的画布标签之外，还有更好的方法来实现这一点吗（即创建一个二维网格，然后能够将数值写入任何特定的正方形）？

<script>
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.fillStyle="#FFFFFF";
        ctx.fillRect(0,0,600,400);
        var hCount, vCount;

        for (hCount=20; hCount<400; hCount+=20) {
            ctx.moveTo(0,hCount);
            ctx.lineTo(600,hCount);
            ctx.stroke();
        }
        for (vCount=20; vCount<600; vCount+=20) {
            ctx.moveTo(vCount,0);
            ctx.lineTo(vCount,400);
            ctx.stroke();
        }
    </script>

我建议您阅读http://diveintohtml5.info/canvas.html#text他基本上将您的代码作为如何使用canvas元素的示例。

报价：

context.fillText("x", 248, 43);

因此，如果你在一个名为"生活"的阵列中感到无聊

for (i = 0; i < life.length; i += 1) {
    for (j = 0; j < life[i].length; j += 1) {
        ctx.fillText(life[i][j], 30 + 20 * i, 30 + 20 * j);
    }
}

或者，如果你只想使用html5来显示一个数字表。。。您可以使用html表，然后一起跳过画布。

相关文章：