在基於網格的HTML畫布上繪制形狀

Question

我正在開發一個應用程序來設計HTML 5 canvas中的事件映射。

這是我要創建的地圖示例http://imgur.com/8bRJaDV

我做了畫布。 我想知道如何在畫布的特定網格框上繪制停頓。 比例尺：1格帆布盒= 1平方英尺。 我想在畫布的（3,3）和（6,6）網格點之間繪制一個4X3檔位，然后如何在畫布上繪制它...

畫布代碼：

<html>
<head>
</head>
<body style=" background: lightblue;">
<canvas id="canvas" width="420px" height="420px" style="background: #fff; magrin:20px;">
Browser does not support canvas 
</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>

謝謝.. ：）

Answer 1

像這樣？

<html>
<head>
</head>
<body style=" background: lightblue;">
<canvas id="canvas" width="420px" height="420px" style="background: #fff; magrin:20px;">
Browser does not support canvas 
</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 grid = 40;

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

function drawBoard(){

 context.beginPath();
 for (var x = 0; x <= bw; x += grid){
    context.moveTo(0.5 + x + p, p);
    context.lineTo(0.5 + x + p, bh + p);
 }
 for (var x = 0; x <= bh; x += grid) {
    context.moveTo(p, 0.5 + x + p);
    context.lineTo(bw + p, 0.5 + x + p);
 }
 context.lineWidth = 1;
 context.strokeStyle = "black";
 context.stroke();

}
drawBoard();

function drawRect() {

 context.beginPath();
 context.rect(0.5+p+3*grid, 0.5+p+3*grid, 4*grid, 3*grid);
 //context.fillStyle = 'yellow';
 //context.fill();
 context.lineWidth = 3;
 //context.strokeStyle = 'blue';
 context.stroke();

}
drawRect();

</script>
</body>
</html>

問候

阿克塞爾

在基於網格的HTML畫布上繪制形狀

問題描述

1 個解決方案

解決方案1
0 已采納 2014-09-10 10:36:30

在基於網格的HTML畫布上繪制形狀

問題描述

1 個解決方案

解決方案1 0 已采納 2014-09-10 10:36:30

解決方案1
0 已采納 2014-09-10 10:36:30