1.前置条件
注意点：在2D绘图环境中的坐标系统，默认情况下是与窗口坐标系统相同，它以canvas的左上角为坐标原点，沿x轴向右为正值，沿y轴向下为正值。其中canvas坐标的单位都是 "px"。
2.绘画思路
1.设置网格的大小，gridSize用于确定网格之中的线之间的间隔 2.获取Canvas的宽度width、高度height，用于计算x轴、y轴需要绘画的条数 3.采用遍历的方式，绘画x轴的线条 4.采用遍历的方式，绘画y轴的线条
<!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>
