Canvas पर ग्रिड ड्रॉ करना
नीचे दिए गए उदाहरण में, हमने पहले ग्रिड की चौड़ाई और ऊंचाई परिभाषित की। फिर हम canvas का आकार परिभाषित कर रहे हैं और ग्रिड को canvas में ड्रॉ कर रहे हैं।
// हम ग्रिड की चौड़ाई और ऊंचाई सेट कर रहे हैं
var grid_w = 200;
var grid_h = 200;
// हम ग्रिड के चारों ओर पैडिंग सेट कर रहे हैं
var gridp = 15;
// हम canvas का आकार इसकी चौड़ाई और ऊंचाई परिभाषित करके परिभाषित कर रहे हैं
var canvas_w = grid_w + (gridp*2) + 1;
var canvas_h = grid_h + (gridp*2) + 1;
var canvas = $('<canvas/>').attr({width: canvas_w, height: canvas_h}).appendTo('body');
var ctx = canvas.get(0).getContext("2d");
ड्रॉइंग मेथड
function drawBoard(){
for (var a = 0; a <= grid_w; a += 50) {
ctx.moveTo(0.5 + a + gridp, gridp);
ctx.lineTo(0.5 + a + gridp, grid_h + gridp);
}
// क्षैतिज रेखाओं के लिए समान तर्क
}
यह ग्रिड लाइन्स ड्रॉ करने के लिए एक लचीला आधार बनाता है।
