HTML5 中运用 canvas 或 SVG 绘制网格的方法

在 HTML5 的强大功能体系中，canvas 和 SVG 为开发者提供了出色的图形绘制能力。绘制网格是常见的图形需求，下面将介绍如何使用 canvas 和 SVG 来实现这一功能。

首先来看 canvas。Canvas 是 HTML5 新增的元素，它提供了一个绘图表面。要绘制网格，我们可以利用 JavaScript 来操作其 2D 绘图上下文。

在 HTML 文件中，先创建一个 canvas 元素，并指定其宽度和高度。然后通过获取 2D 绘图上下文来进行绘制操作。例如，我们可以使用循环来绘制水平和垂直的线条以形成网格。假设我们要绘制一个每格为 50 像素的网格，代码如下：

<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    for (let i = 0; i <= canvas.width; i += 50) {
        ctx.beginPath();
        ctx.moveTo(i, 0);
        ctx.lineTo(i, canvas.height);
        ctx.stroke();
    }

    for (let j = 0; j <= canvas.height; j += 50) {
        ctx.beginPath();
        ctx.moveTo(0, j);
        ctx.lineTo(canvas.width, j);
        ctx.stroke();
    }
</script>

这段代码通过两个嵌套的 for 循环，分别绘制水平和垂直线条，线条间隔为 50 像素，从而形成网格。

接下来是 SVG。SVG 即可缩放矢量图形，它基于 XML 语法。与 canvas 不同，SVG 使用标记语言来描述图形。

我们可以直接在 HTML 文件中嵌入 SVG 代码来绘制网格。例如：

<svg width="400" height="400">
    <g>
        <rect width="400" height="400" fill="none" stroke="black" stroke-width="1" />
        <g>
            <g transform="translate(0,0)">
                <path d="M 0 0 L 0 400" stroke="black" stroke-width="1" />
            </g>
            <g transform="translate(50,0)">
                <path d="M 0 0 L 0 400" stroke="black" stroke-width="1" />
            </g>
            <!-- 更多垂直线条 -->
        </g>
        <g>
            <g transform="translate(0,0)">
                <path d="M 0 0 L 400 0" stroke="black" stroke-width="1" />
            </g>
            <g transform="translate(0,50)">
                <path d="M 0 0 L 400 0" stroke="black" stroke-width="1" />
            </g>
            <!-- 更多水平线条 -->
        </g>
    </g>
</svg>

这段 SVG 代码中，通过一系列的 path 元素和变换操作，绘制出了网格。

无论是 canvas 还是 SVG，都有其独特的优势。canvas 适合绘制动态图形和需要高性能的场景，而 SVG 则更适合绘制静态矢量图形，且易于修改和扩展。开发者可以根据具体需求选择合适的技术来绘制网格，为网页增添丰富的视觉效果。