绘画的思路

如果要绘画一个网格的图形，在Canvas可以怎么去绘画呢？下面来看看绘画的步骤，如下：

  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>

浏览器显示如下：


Canvas绘制网格_2d

Canvas绘制网格_i++_02