キャンバス上にグリッド/テーブルを描画するHTML5

私はどこでも検索していましたが、HTML5キャンバスにグリッド/テーブルを描画する方法が見つかりませんでした。私はHTML5とキャンバスが初めてです。キャンバス上にグリッド/テーブルを描画するHTML5

私は形を描く方法を知っていますが、この描画グリッドは永遠に理解しています。

誰か助けてもらえますか？あなたの時間は非常に高く評価されています。

2012-07-31 Jay Mayu

答えはここから取られGrid drawn using a <canvas> element looking stretched

だけで、それを少し編集し、それはのように書くこともできます

<html> 
<head> 
<script type="text/javascript" language="javascript"> 
// Box width 
var bw = 400; 
// Box height 
var bh = 400; 
// Padding 
var p = 10; 

var canvas = document.getElementById("canvas"); 
var context = canvas.getContext("2d"); 
function drawBoard(){ 
for (var x = 0; x <= bw; x += 40) { 
    context.moveTo(0.5 + x + p, p); 
    context.lineTo(0.5 + x + p, bh + p); 
} 


for (var x = 0; x <= bh; x += 40) { 
    context.moveTo(p, 0.5 + x + p); 
    context.lineTo(bw + p, 0.5 + x + p); 
} 

context.strokeStyle = "black"; 
context.stroke(); 
} 

drawBoard(); 
</script> 
</head> 
<body style=" background: lightblue;"> 
    <canvas id="canvas" width="420px" height="420px" style="background: #fff; margin:20px"></canvas> 
</body> 
</html>

出典

2012-07-31 08:34:04

がどのように私はこれを使用します8×6テーブルを作成するには？ – TastyLemons

Theres a typo magrin：20px; – zeion

これを役に立てば幸い：

<html> 
    <head> 

    </head> 
    <body style=" background: lightblue;"> 
     <canvas id="canvas" width="420px" height="420px" style="background: #fff;  magrin:20px;"></canvas> 
     <script type="text/javascript" language="javascript"> 
    var bw = 400; 
    var bh = 400; 
    var p = 10; 
    var cw = bw + (p*2) + 1; 
    var ch = bh + (p*2) + 1; 

    var canvas = document.getElementById("canvas"); 
    var context = canvas.getContext("2d"); 
    function drawBoard(){ 
    for (var x = 0; x <= bw; x += 40) { 
     context.moveTo(0.5 + x + p, p); 
     context.lineTo(0.5 + x + p, bh + p); 
    } 


    for (var x = 0; x <= bh; x += 40) { 
     context.moveTo(p, 0.5 + x + p); 
     context.lineTo(bw + p, 0.5 + x + p); 
    } 

    context.strokeStyle = "black"; 
    context.stroke(); 
    } 

    drawBoard(); 
    </script> 
    </body> 
    </html>

出典

2013-06-28 08:57:58

キャンバス上にグリッド/テーブルを描画するHTML5

答えて

関連する問題