在基于网格的HTML画布上绘制形状

Drawing shapes on a HTML canvas on bases of grid

本文关键字：绘制 HTML 于网格 网格      更新时间：2023-09-26

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

以下是我想要创建的地图示例https://i.stack.imgur.com/XGvTg.jpg

画布是我做的。我想知道如何在画布的特定网格框上绘制失速。比例：画布中的1盒网格=1平方英尺。例如，我想在（3,3）&（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>

谢谢…：）

这样？

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

问候

Axel

相关文章：