看到一个有趣的网站，感觉他们的网格很有意思。
使用canvas 来实现一下。
效果图：
假如屏幕宽度➗网格宽度 不是整数。 所以canvas 边上的点，需要单独处理一下。
代码展示：
const { width, height } = useWindowSize()<div className="absolute inset-0" style={{ zIndex: 1 }} id='wrap'><div className='px-5 py-3'><canvas id="grid" width={width - 40} height={height - 24}></canvas></div></div>
useLayoutEffect(() => {const canvas: any = document.getElementById("tutorial");const ctx = canvas.getContext("2d");if (ctx && width && height) {/*1. 设置网格的大小，gridSize用于确定网格之中的线之间的间隔2. 获取Canvas的宽度width、高度height，用于计算x轴、y轴需要绘画的条数3. 采用遍历的方式，绘画x轴的线条4. 采用遍历的方式，绘画y轴的线条*/// 1. 设置网格大小const girdSize = 100;// 2. 获取Canvas的width、heightconst CanvasWidth = ctx.canvas.width;const CanvasHeight = ctx.canvas.height;const radius = 2;//半径const lineW = 0.3;const lineColor = "rgba(255,255,255,0.5)"//画canvas 的 右边和底边的边框ctx.beginPath(); // 开启路径，设置不同的样式ctx.lineWidth = lineW;ctx.moveTo(CanvasWidth - 3, 3); // 位移开始位置ctx.lineTo(CanvasWidth - 3, CanvasHeight - 3);//位移结束位置ctx.moveTo(CanvasWidth - 3, CanvasHeight - 3);//位移开始位置ctx.lineTo(3, CanvasHeight - 3);//位移结束位置ctx.closePath()ctx.strokeStyle = lineColor; // 设置每个线条的颜色ctx.stroke();// 3. 采用遍历的方式，绘画x轴的线条const xLineTotals = Math.floor(CanvasHeight / girdSize); // 计算需要绘画的x轴条数for (let i = 0; i <= xLineTotals; i++) {ctx.beginPath(); // 开启路径，设置不同的样式ctx.lineWidth = lineW;ctx.moveTo(3, girdSize * i - 0.5 + 3); // -0.5是为了解决像素模糊问题ctx.lineTo(CanvasWidth - 3, girdSize * i - 0.5 + 3);ctx.strokeStyle = lineColor; // 设置每个线条的颜色ctx.closePath()ctx.stroke();}// 4.采用遍历的方式，绘画y轴的线条const yLineTotals = Math.floor(CanvasWidth / girdSize); // 计算需要绘画y轴的条数for (let j = 0; j <= yLineTotals; j++) {ctx.beginPath(); // 开启路径，设置不同的样式ctx.lineWidth = lineW;ctx.moveTo(girdSize * j - 0.5 + 3, 3);ctx.lineTo(girdSize * j - 0.5 + 3, CanvasHeight - 3);ctx.strokeStyle = lineColor; // 设置每个线条的颜色ctx.closePath()ctx.stroke();}// 在y轴 x 轴的交叉点画上小圆点。for (let i = 0; i <= yLineTotals; i++) {for (let j = 0; j <= xLineTotals; j++) {ctx.beginPath(); // 开启路径，设置不同的样式ctx.arc(i * girdSize + 3, j * girdSize + 3, radius, 0, 2 * Math.PI);ctx.closePath()// 设置填充样式为红色ctx.fillStyle = 'white';ctx.fill(); // 填充形状ctx.stroke();}}//右边y轴上点点for (let j = 0; j <= xLineTotals; j++) {ctx.beginPath(); // 开启路径，设置不同的样式ctx.arc(CanvasWidth - 3, j * girdSize + 3, radius, 0, 2 * Math.PI);ctx.closePath()// 设置填充样式为红色ctx.fillStyle = 'white';ctx.fill(); // 填充形状ctx.stroke();}//底边x轴上点点for (let x = 0; x <= yLineTotals; x++) {ctx.beginPath(); // 开启路径，设置不同的样式ctx.arc(x * girdSize + 3, CanvasHeight - 3, radius, 0, 2 * Math.PI);ctx.closePath()// 设置填充样式为红色ctx.fillStyle = 'white';ctx.fill(); // 填充形状ctx.stroke();}//底部交叉点ctx.beginPath(); // 开启路径，设置不同的样式ctx.arc(CanvasWidth - 3, CanvasHeight - 3, radius, 0, 2 * Math.PI);ctx.closePath()// 设置填充样式为红色ctx.fillStyle = 'white';ctx.fill(); // 填充形状}}, [width, height])// 屏幕的size 变化的时候canvas 画布重新绘制
