在網格基礎上的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畫布上繪製形狀

回答

相關問題