HTML5中canvas画图之绘制方格图

最新推荐文章于 2025-06-05 20:05:14 发布

原创最新推荐文章于 2025-06-05 20:05:14 发布 · 2.2w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #html5

HTML5 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种在HTML5 Canvas上绘制方格图的方法。通过简单的JavaScript代码实现横线和竖线的绘制，最终形成网格状图案。此方法可用于创建折线图的基础网格。

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

下一篇博文是准备绘制折线数据图的，这个绘制方格图是为绘制折线图做准备。方格将作为折线图的基准线。绘制方格图的逻辑很简单，只要在canvas上绘制一系列的横线和竖线即可。下面是具体代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绘制方格图</title>
</head>
<body>
	<canvas id="canvas" width="300" height="300"></canvas>
	<script type="text/javascript">
		//获取上下文
		var canvas=document.getElementById("canvas");
		var ctx=canvas.getContext("2d");
		//描绘背景
		var gradient=ctx.createLinearGradient(0,0,0,300);//createLinearGradient() 方法创建线性的渐变对象。
		gradient.addColorStop(0,"#e0e0e0");
		gradient.addColorStop(1,"#ffffff");
		ctx.fillStyle=gradient;
		ctx.fillRect=(0,0,canvas.width,canvas.height);
		//描绘边框
		var grid_cols=10;
		var grid_rows=10;
		var cell_height=canvas.height/grid_rows;
		var cell_width=canvas.width/grid_cols;
		ctx.lineWidth=1;
		ctx.strokeStyle="#a0a0a0";
		//结束边框描绘
		ctx.beginPath();
		//准备画横线
		for(var col=0;col<=grid_cols;col++)
			{
				var x=col*cell_width;
				ctx.moveTo(x,0);
				ctx.lineTo(x,canvas.height);
			}
			//准备画竖线
			for(var row=0;row<=grid_rows;row++)
				{
					var y=row*cell_height;
					ctx.moveTo(0,y);
					ctx.lineTo(canvas.width,y);
				}
				//完成描绘
				ctx.stroke();
	</script>
</body>
</html>

成功后截图为：