无聊中？天天穿格格衫，来为你的网站画个网格线背景吧！小白也能看懂。（Html5 Canvas实现网格线背景）

引入

有时候，你会觉得，为啥我做的网站那么丑，就算排版再漂亮也让人觉得是上个世纪的页面。

或许，你没有一个专业的页面设计师。

当然，我们可以做自己的设计师。

既然设计不出高大上的页面，那就从生活中找经验。

你看，那，程序员的格格衫是多么得和谐～

对，格子是的衬托是最安全的（不然走在路上会被骂衣品丑）。

好了，进入正题。

正题

为了烘托演示效果， 我们先写一个简单的文字排版。

如果我们加上一个网格线背景 。

瞬间档次提高了有木有？ 

下面来说一下网格线的实现。

详细步骤

我来用canvas进行实现，这里我假设你是Canvas小白，所以我给你往详细了说。

画网格线：通过Canvas，进行线段绘画，计算每条线的位置和长度，然后绘制即可。

设置绝对布局：为了让网格线背景不影响我们的主元素，我们设成绝对布局就不用为它操心了。

窗口缩放监听：因为Canvas画出来的是静态的图像，所以对窗口设置缩放监听并更新背景，以免缩放产生不美观的现象。

先来看一下网格的实现代码：

    //获取canvas元素
var canvas = document.getElementById('canvas'),
    //获取绘图环境
    context = canvas.getContext('2d');
/**
     * 画网格
     * @param color 网格线颜色
     * @param stepX 格子横向间距
     * @param stepY 格子垂直间距
     */
    function drawGrid(color, stepX, stepY) {
        context.save();
        context.strokeStyle = color;
        context.lineWidth = 0.5;
        for (var i = stepX + 0.5;
             i < context.canvas.width; i += stepX) {
            context.beginPath();
            context.moveTo(i, 0);
            context.lineTo(i, context.canvas.height);
            context.stroke();
        }

        for (var i = stepY + 0.5;
             i < context.canvas.height; i += stepY) {
            context.beginPath();
            context.moveTo(0, i);
            context.lineTo(context.canvas.width, i);
            context.stroke();
        }

        context.restore();
    }

drawGrid(color,stepX,stepY);我们通过这三个参数，自定义网格线的颜色，水平间距，垂直间距。

这里我们首先获取到canvas标签元素，然后通过Canvas的API方法canvas.getContext('2d');获取绘图环境，所有对Canvas进行绘图操作的方法都在绘图环境中。

首先忽略save()方法，我们通过strokeStyle设置网格线颜色，通过lineWith设置网格线宽度，通过stepX设置网格水平间距，stepY设置垂直间距；循环中的的beginPath(）为了绘图初始化用的，如果你是小白，不在意也无妨。然后是moveTo()和lineTo()是画线的起止点，然后根据页面宽度一条一条画线，直到画出整个网格。

drawGrid()方法内开头的save()和末尾的restore()是“备份样式”和“恢复样式”的方法，这是Canvas编码的需要，详细原因自行搜索，这里不必过多探究。

代码演示 

在线演示 详细代码

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy