绘画的思路
如果要绘画一个网格的图形，在Canvas可以怎么去绘画呢？下面来看看绘画的步骤，如下：
- 设置网格的大小，gridSize用于确定网格之中的线之间的间隔
- 获取Canvas的宽度width、高度height，用于计算x轴、y轴需要绘画的条数
- 采用遍历的方式，绘画x轴的线条
- 采用遍历的方式，绘画y轴的线条
通过这四个基本步骤，就可以绘画出一个完整的网格图了，下面来示例。
绘画网格的示例
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{
border: 1px solid #cccccc;
margin-top: 100px;
margin-left: 100px;
}
</style>
<script type="text/javascript">
window.onload = function () {
/*获取元素*/
var myCanvas = document.querySelector('#myCanvas');
/*获取绘图工具*/
var ctx = myCanvas.getContext('2d');
/*
1. 设置网格的大小，gridSize用于确定网格之中的线之间的间隔
2. 获取Canvas的宽度width、高度height，用于计算x轴、y轴需要绘画的条数
3. 采用遍历的方式，绘画x轴的线条
4. 采用遍历的方式，绘画y轴的线条
*/
// 1. 设置网格大小
var girdSize = 10;
// 2. 获取Canvas的width、height
var CanvasWidth = ctx.canvas.width;
var CanvasHeight = ctx.canvas.height;
// 3. 采用遍历的方式，绘画x轴的线条
var xLineTotals = Math.floor(CanvasHeight / girdSize); // 计算需要绘画的x轴条数
for (var i = 0; i < xLineTotals; i ) {
ctx.beginPath(); // 开启路径，设置不同的样式
ctx.moveTo(0, girdSize * i - 0.5); // -0.5是为了解决像素模糊问题
ctx.lineTo(CanvasWidth, girdSize * i - 0.5);
ctx.strokeStyle = "#ccc"; // 设置每个线条的颜色
ctx.stroke();
}
// 4.采用遍历的方式，绘画y轴的线条
var yLineTotals = Math.floor(CanvasWidth / girdSize); // 计算需要绘画y轴的条数
for (var j = 0; j < yLineTotals; j ) {
ctx.beginPath(); // 开启路径，设置不同的样式
ctx.moveTo(girdSize * j, 0);
ctx.lineTo(girdSize * j, CanvasHeight);
ctx.strokeStyle = "#ccc"; // 设置每个线条的颜色
ctx.stroke();
}
}
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>浏览器显示如下：
