javascript - 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?

Question

I have created an HTML5 canvas and using the stroke() method, ended up with a grid. Below is the code that i have used:

I now do see a grid display. However, i am trying to figure out how to add numeric data to each of the grid columns? Or Alternatively, is there a better way to accomplish this (i.e. to create a 2 dimensional grid and then be able to write numeric values to any specific square) besides using the canvas tag of 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>

Answer 1

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

去引用：

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 表格，然后一起跳过画布。