在畫布上繪製網格/表格HTML5

我一直在尋找各處，無法找到如何在HTML5畫布上繪製網格/表格。我是HTML5和canvas的新手。在畫布上繪製網格/表格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 2014-05-25 06:07:45

Theres a typo magrin：20px; – zeion 2016-07-08 15:43:16

這也可以寫成：

<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

回答

相關問題