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

我正在开发一个应用程序以在HTML 5画布中设计事件图。在网格基础上的HTML画布上绘制形状

我已经做画布图的例子。我想知道如何在画布的特定网格框上绘制拖延。比例尺：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>

谢谢.. :)

来源

2014-09-10 Abhijeet

是否这样？

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

问候

阿克塞尔

来源

2014-09-10 10:36:30

非常感谢阿克塞尔.. 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

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

回答

相关问题