您需要用细线在画布上绘制网格。我正在制作像素艺术画布。
我用了ctx.lineWidth = 0.1;，然后网格就模糊了。模糊通过放大镜非常明显。当您在绘制网格时
添加偏移量时，一切都变得很好，但是它的边缘进入了图片，这是一个问题，因为单元格大小只有。0.5px5х5px
为了使网格不会绘制在像素之上，我决定将绘图本身移动0.5px。结果却是相反的效果——网格清晰漂亮，画面模糊不美观。
然后我决定在 Photoshop 中绘制一个网格，画布的大小（它是固定大小）并以这种方式放置网格会更容易。Photoshop 断然拒绝绘制较小的线条1px（这是可以理解的），但我仍然决定看看会发生什么。结果，我们得到了一个均匀的网格，一个均匀的图像，但同时，每个像素现在不是5x5，但是4х4（谁会想到）
问题：如何用单元格绘制细网格5x5px，以最小的线条粗细，使网格清晰且图像本身不变形？
网格无位移：
带偏移的网格，图像 - 无：
网格和偏移图像：
// Canvas с сеткой без смещения
var canvas = document.getElementById('example1');
var ctx = canvas.getContext('2d');
//Рисуем пиксели для наглядности
ctx.fillStyle = "yellow";
ctx.fillRect(20, 20, 5, 5);
ctx.fillRect(20, 30, 5, 5);
ctx.fillRect(30, 30, 5, 5);
//Задаём толщину линии и цвет
ctx.lineWidth = 0.1;
ctx.strokeStyle = "red"
// Рисуем вертикальные линии
for (var x = 0; x < canvas.width; x += 5) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
ctx.stroke();
}
// Рисуем горизонтальные линии
for (var y = 0; y < canvas.height; y += 5) {
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(canvas.width, y);
ctx.stroke();
}
// Canvas с сеткой со смещением в 0.5
var canvas = document.getElementById('example2');
var ctx = canvas.getContext('2d');
//Рисуем пиксели для наглядности
ctx.fillStyle = "yellow";
ctx.fillRect(20, 20, 5, 5);
ctx.fillRect(20, 30, 5, 5);
ctx.fillRect(30, 30, 5, 5);
//Задаём толщину линии и цвет
ctx.lineWidth = 0.1;
ctx.strokeStyle = "red"
// Рисуем вертикальные линии
for (var x = 0.5; x < canvas.width; x += 5) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
ctx.stroke();
}
// Рисуем горизонтальные линии
for (var y = 0.5; y < canvas.height; y += 5) {
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(canvas.width, y);
ctx.stroke();
}
// Canvas с сеткой со смещением в 0.5
var canvas = document.getElementById('example3');
var ctx = canvas.getContext('2d');
//Рисуем пиксели для наглядности
ctx.fillStyle = "yellow";
ctx.fillRect(20.5, 20.5, 5, 5);
ctx.fillRect(20.5, 30.5, 5, 5);
ctx.fillRect(30.5, 30.5, 5, 5);
//Задаём толщину линии и цвет
ctx.lineWidth = 0.1;
ctx.strokeStyle = "red"
// Рисуем вертикальные линии
for (var x = 0.5; x < canvas.width; x += 5) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
ctx.stroke();
}
// Рисуем горизонтальные линии
for (var y = 0.5; y < canvas.height; y += 5) {
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(canvas.width, y);
ctx.stroke();
}canvas{
background-color: lightgrey;
}<p>Canvas с сеткой без смещения</p>
<canvas id="example1" width="100" height="100"></canvas>
<p>Canvas с сеткой со смещением в 0.5</p>
<canvas id="example2" width="100" height="100"></canvas>
<p>Canvas с сеткой со смещением в 0.5 и смещением изображения</p>
<canvas id="example3" width="100" height="100"></canvas>
您可以在保持画布大小的同时提高画布的分辨率。增加画布，保持尺寸：
更改 ctx 比例以在相同坐标处绘制
所有代码：