HTML5中canvas画图之绘制方格图

最新推荐文章于 2024-05-08 13:42:39 发布

花2不谢

最新推荐文章于 2024-05-08 13:42:39 发布

阅读量2.1w

点赞数 2

分类专栏： HTML5 文章标签： canvas html5

本文链接：https://blog.csdn.net/qq_25821067/article/details/51637314

版权

HTML5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

下一篇博文是准备绘制折线数据图的，这个绘制方格图是为绘制折线图做准备。方格将作为折线图的基准线。绘制方格图的逻辑很简单，只要在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>

成功后截图为：

花2不谢

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
HTML5中canvas画图之绘制方格图

下一篇博文是准备绘制折线数据图的，这个绘制方格图是为绘制折线图做准备。方格将作为折线图的基准线。绘制方格图的逻辑很简单，只要在canvas上绘制一系列的横线和竖线即可。下面是具体代码: 绘制方格图 //获取上下文 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2
复制链接

扫一扫

专栏目录