用CSS3和Canvas來畫網格

我們經常使用一些excel表格來處理數據，在html中，我們可以用table來制成表格。今天來看一下一些不同的方法。

方法一：使用CSS3的background的linear-gradient屬性

linear-gradient表示一種線性漸變，指定好開始的坐標，以及線性漸變的參數，就可以實現背景顏色的多變。

先來看效果圖：

看html代碼：

<div class="grid"></div>

CSS代碼：

        div,canvas{
            width: 400px;
            height: 280px;
            margin: 10px;
            border: 1px solid #000000;
        }
        .grid{
            background: -webkit-linear-gradient(top,transparent 39px,blue 39px,blue 41px,transparent 41px,transparent 79px,red 80px),
                        -webkit-linear-gradient(left,transparent 39px,yellow 39px,yellow 41px,transparent 41px,transparent 79px,green);
            background-size: 81px 81px;
        }

非常簡單，如果仔細看，你就能看出它的使用規律。這里要注意，我使用的是chrome瀏覽器，如果在兼容多種瀏覽器，需要在linear-gradient加上相對應的前綴，比如IE：-ms-linear-gradient，firefox：-moz-linear-gradient，opera：-o-linear-gradient。

另外，我們注意到，雖然在CSS代碼中，我們是先寫橫線的樣式，再寫豎線的樣式的，但是，當縱向的線和橫向的線相交時，在相交部分，橫向的線是在縱向的線之上的。反之，則縱向的線會在橫向的線之上。（什么原因暫時還不清楚）。

現在我們用canvas的方法實現一遍，效果如上圖所示。

html代碼：

<canvas></canvas>

JS代碼：

        var canvas = document.getElementsByTagName('canvas')[0];
        canvas.width = 400;
        canvas.height = 280;
        if(canvas.getContext){
            var ctx = canvas.getContext("2d"),
                width = canvas.width,
                height = canvas.height;
            ctx.lineWidth = 2;
　　　　　　　//先畫橫線
            for( var i = 1; i * 40 < height; i++ ){
                ctx.strokeStyle = i % 2 ? 'blue' : 'red';
                ctx.beginPath();
                ctx.moveTo(0,i * 40);
                ctx.lineTo(width,i* 40);
                ctx.stroke();
            }
　　　　　　　//再畫縱線
            for( var j = 1; j * 40 < width; j++ ){
                ctx.strokeStyle = j % 2 ? 'yellow' : 'green';
                ctx.beginPath();
                ctx.moveTo(j * 40, 0);
                ctx.lineTo(j * 40, height);
                ctx.stroke();
            }

        }

在JS代碼中，我們通過畫簡單的直線來實現了這個效果，但是注意，這里的效果暫時還和預期的有點出入：

橫線和縱線相交時，縱線在上，這是因為我們在代碼中，先畫橫線，再畫縱線，所以很自然就會有這樣的效果。

如果我們要達到預期的效果，有兩種解決方案：

方案一：將畫線的兩個for循環的順序調轉過來，變成先畫豎線，再畫橫線，則可以達到預期的效果。

方案二：使用 ctx.globalCompositeOperation屬性，具體的做法：在原來的代碼中，在畫橫線的for循環之前，加上一句：

ctx.globalCompositeOperation = 'destination-over';

它表示，當線與線之間出現重疊時，重疊部分采用后來畫的線的樣式。

具體ctx.globalCompositeOperation的用法可以參考 這個 

參考資料：使用CSS3繪制網格線

<- 本文完 ->