言

有沒有很好奇，類似 processOn 這類作圖網站中，網格背景 是怎么做的呢？

如果你 F12 看過它的代碼，你將發現原來不是通過 background-image 之類 css 屬性做的，而是通過 canvas 實現的。

這篇主要講如何通過 canvas 來繪制出這樣的 網格背景，以及中間碰到的一個 線條模糊的問題。

手把手寫代碼

1. 創建 ctx 對象

這邊將新建一個和屏幕尺寸相同的 canvas 畫布：

const canvasEl = document.createElement("canvas");
const sh = screen.height;
const sw = screen.width;
canvasEl.width = sw;
canvasEl.height = sh;
const ctx = canvasEl.getContext("2d");

2. 繪制網格

先簡單說下思路：

根據 canvas 畫布尺寸，以 10px 為間距，分別繪制橫縱坐標的線條。

比如繪制橫向線條，先將“畫筆”移至起點坐標 (0, y)，然后通過線條方法 lineTo 繪制屏幕寬度的線條，即繪制 (0, y) 至 (screen.width, y) 的直線。

然后 y 會按照間距 10px 逐漸遞增，直至繪制完整個屏幕。

下面根據橫縱兩個方向，封裝了 draw 方法：

const draw = function (isColumn) {
  const gutter = 10;
  const limit = isColumn ? sh : sw;

  let i = 0;
  while (i * gutter + gutter <= limit) {
    i++;
    const point = i * gutter;

    // 清空子路徑列表開始一個新路徑
    ctx.beginPath();

    // 分割線
    ctx.strokeStyle = point % 100 !== 0 ? "#f0f0f0" : "#d6e4ff";

    // 將一個新的子路徑的起始點移動到(x，y)坐標
    if (isColumn) {
      ctx.moveTo(0, point);
    } else {
      ctx.moveTo(point, 0);
    }
    // 使用直線連接子路徑的終點到x，y坐標
    if (isColumn) {
      ctx.lineTo(sw, point);
    } else {
      ctx.lineTo(point, sh);
    }
    // 根據當前的畫線樣式，繪制當前或已經存在的路徑的方法
    ctx.stroke();
  }
};

然后分別繪制橫縱坐標，并把 canvas 掛載到 body 上：

draw(true);
draw(false);

document.body.append(canvasEl);

很順利你將得到 canvas 繪制的網格圖形：

線條模糊

如果你觀察比較細膩，能發現上面的網格圖形并不是很清晰，可以仔細觀察下面的圖：

為什么會有這樣的情況出現呢？

因為調用 lineTo 是從 A 點到 B 點，軌跡是點到點的連線。當繪制 1px 線條時，是以這個軌跡連線為中間線左右各渲染 0.5px 的線條。這會使得一個像素點只渲染了一半，而另一半會用一個比較弱的顏色填充，導致繪制出模糊的線條。

怎么改？

只要在 moveTo 時，將坐標偏移 0.5px（即將線條軌跡偏移 0.5 位置），然后調用 lineTo 時，也將坐標偏移 0.5px。

這樣，最終繪制線條的時候，將在一個完整的像素區域進行渲染了。

有沒有便捷的方法？

使用 translate 偏移 x 和 y 坐標值，然后繪制好后再調用 setTransform 重置回來：

ctx.translate(0.5, 0.5);
//...
ctx.setTransform(1, 0, 0, 1, 0, 0);

參考

• canvas 畫布解決 1px 線條模糊問題
• Drawing a 1px thick line in canvas creates a 2px thick line
• CanvasRenderingContext2D.setTransform()

#前端開發#