캔버스에 그리드/테이블 그리기 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 by 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

답변

관련 문제