0

HTML5 キャンバスを作成し、stroke() メソッドを使用してグリッドを作成しました。以下は私が使用したコードです：

グリッド表示が表示されるようになりました。ただし、各グリッド列に数値データを追加する方法を理解しようとしていますか? または、HTML5 の canvas タグを使用する以外に、これを達成するためのより良い方法 (つまり、2 次元グリッドを作成し、特定の正方形に数値を書き込むことができる) はありますか?

<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>
4

1 に答える 1

0

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 テーブルを使用して、キャンバスをすべてスキップすることもできます。

于 2013-06-26T04:11:10.930 に答える