canvas前端页面中有很多小方格，怎么画

 我来答

1个回答

#热议# 什么是淋病？哪些行为会感染淋病？

育知同创教育
2017-06-25 · 百度知道合伙人官方认证企业

育知同创教育

1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】

向TA提问

关注

展开全部

。方格将作为折线图的基准线。绘制方格图的逻辑很简单，只要在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>