Question

我正在开发一个应用程序来设计HTML 5画布中的事件映射。

以下是我想要创建的地图示例 http://imgur.com/8bRJaDV

我制作了画布。我想知道如何在画布的特定网格框上绘制停顿。比例：画布中的1盒网格= 1平方英尺。防爆。我想在（3,3）和＆之间绘制一个4X3档位（6,6）画布的网格点然后如何在画布上绘制它......

画布代码：

<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 个答案: