canvas绘制网格(增加坐标)

最新推荐文章于 2025-06-23 17:49:05 发布

原创最新推荐文章于 2025-06-23 17:49:05 发布 · 6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #网格 #canvas

JavaScript 高级程序设计同时被 2 个专栏收录

29 篇文章

订阅专栏

Canvas和webGL

6 篇文章

订阅专栏

本文介绍了一种使用JavaScript在HTML画布上绘制带有坐标轴的网格图表的方法。通过定义函数drawGrid、drawText和drawRect，实现了网格的绘制及坐标轴的添加，便于直观展示数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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