Zeichnen Gitter/Tabelle auf Leinwand HTML5

Ich habe überall gesucht und konnte nicht finden, wie man eine Grid/Tabelle auf einem HTML5 Canvas zeichnet. Ich bin neu in HTML5 und Canvas.Zeichnen Gitter/Tabelle auf Leinwand HTML5

Ich weiß, wie man Formen zeichnet, aber diese Zeichnung Raster dauert ewig, um zu verstehen.

Kann mir jemand dabei helfen? Ihre Zeit wird sehr geschätzt.

Quelle

2012-07-31 Jay Mayu

ist die Antwort von hier Grid drawn using a <canvas> element looking stretched

genommen

es einfach ein wenig bearbeitet, hoffe, es

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

Quelle

2012-07-31 08:34:04

Wie würde ich diese verwenden um einen 8 mal 6 Tisch zu erstellen? – TastyLemons

Theres ein Tippfehler magrin: 20px; – zeion

Dies hilft, kann auch geschrieben werden, werden:

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

Quelle

2013-06-28 08:57:58

Zeichnen Gitter/Tabelle auf Leinwand HTML5

Antwort

Verwandte Themen