canvas绘制网格(增加坐标)

1.接着上篇文章，我打算给绘制的表格增加坐标，这样看起来比较方便

//绘制网格
function drawGrid(CANVAS_WIDTH,CANVAS_HEIGHT,GRID_WIDTH,GRID_HEIGHT){
	var rows=parseInt(CANVAS_WIDTH/GRID_WIDTH);
	var cols=parseInt(CANVAS_HEIGHT/GRID_HEIGHT);
	for(var i=0;i<rows;++i)
	{
		for(var j=0;j<cols;++j)
		{
			drawRect(i,j,GRID_WIDTH,GRID_HEIGHT);
			if(i==0||j==0)                
			{
				drawText(i,j,GRID_WIDTH,GRID_HEIGHT); //增加坐标
			}
		}
	}
}

//绘制横坐标与纵坐标
function drawText(i,j,GRID_WIDTH,GRID_HEIGHT){
	var drawing=document.getElementById("drawing");
	if(!drawing.getContext) return false;
	var context=drawing.getContext("2d");
	context.font="bold 16px Arial";
	context.textAlign="start";
	var x_axis=i*100+"";
	var y_axis=j*100+"";
	context.fillText(x_axis,i*100,20);   //绘制横坐标
	context.fillText(y_axis,10,j*100);    //绘制纵坐标

}

//绘制矩形
function drawRect(i,j,GRID_WIDTH,GRID_HEIGHT){
	var drawing=document.getElementById("drawing");
	if(!drawing.getContext) return false;
	var context=drawing.getContext("2d");
	context.lineWidth=1;
	context.strokeStyle="lightgrey";
	context.strokeRect(i*100,j*100,GRID_WIDTH,GRID_HEIGHT);
}

2.调用就可以

var CANVAS_WIDTH=1024;
var CANVAS_HEIGHT=768;
var GRID_WIDTH=100;
var GRID_HEIGHT=100;

drawGrid(CANVAS_WIDTH,CANVAS_HEIGHT,GRID_WIDTH,GRID_HEIGHT);