整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
有沒有很好奇，類似 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。
這樣，最終繪制線條的時候，將在一個完整的像素區域進行渲染了。
選自：https://www.jianshu.com/p/c0970eecd843
有沒有便捷的方法？
使用 translate 偏移 x 和 y 坐標值，然后繪制好后再調用 setTransform 重置回來：
ctx.translate(0.5, 0.5);
//...
ctx.setTransform(1, 0, 0, 1, 0, 0);#前端開發#
天主要講解用canvas畫布實現炫酷背景特效，鼠標移動到該背景區域會出現一點紅點然后被吸附進去實現拖拉線條的效果，非常炫酷，可以應用到網站的首頁背景圖下，增強用戶體驗！
下面來看看實現的代碼
html:
js:
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
