在网格基础上的HTML画布上绘制形状
问题描述:
我正在开发一个应用程序以在HTML 5画布中设计事件图。在网格基础上的HTML画布上绘制形状
这里是我想创建 http://imgur.com/8bRJaDV
我已经做画布图的例子。我想知道如何在画布的特定网格框上绘制拖延。 比例尺:1格的画布= 1平方英尺 Ex。我想画的画布的(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>
谢谢.. :)
答
是否这样?
<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>
问候
阿克塞尔
非常感谢阿克塞尔.. THISIS正是我想...你能描述如果可能的话,你是怎么做的逻辑。我必须手动输入通过一个窗体摊位坐标绘制在画布摊位..所以这个逻辑将帮助我通过文本框获得价值..非常感谢.. – Abhijeet 2014-09-11 11:13:57
不明白你的意思。逻辑与您用于绘制网格的逻辑相同。网格宽40px,高,因此3 *网格是宽度和高度的第3个网格平方的起点。 – 2014-09-11 12:28:01
Ohkkk ..明白了......我制作了地图......非常感谢.. :) :) :) – Abhijeet 2014-09-11 13:53:14