javascript - Canvas 使线条更粗

Question

假设我有下一个使用 Canvas 绘制网格的代码:

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    rows = 10,
    cols = 10,
    size = canvas.getAttribute("width") / rows;

drawGrid();

function drawGrid() {
    for (var i = 0; i < rows; i++) {
        for (var j = 0; j < cols; j++) {
            ctx.strokeStyle ='rgba(242, 198, 65, 0.1)'; 
            ctx.strokeRect(i * size, j * size, size, size);
            ctx.fillStyle = 'rgb(38,38,38)';
            ctx.fillRect(i * size, j * size, size, size);
       }
   }
}

可以查看结果here

我的问题是，如果我注释行 ctx.fillRect(i * size, j * size, size, size);

，为什么网格会显得更粗

编辑

如何在不使用 fillRect 的情况下获得相同的结果？

Answer 1

您的笔画在半像素上呈现，这导致它们在两个像素上模糊。您的填充覆盖了其中的一部分，使它们看起来又像半个像素。

简单的解决方案是将绘图偏移 0.5, 0.5 以便在整个像素上绘图。有关更多信息，请参阅 http://diveintohtml5.info/canvas.html 的部分开始:

Q: Why did you start x and y at 0.5? Why not 0?

---

无论如何，您不应该使用矩形来制作网格，您应该只使用线条，并且您应该只需要在网格完成时最后一次描边。这样做可确保您的半透明网格在网格线的交点处没有较粗的点。

这是一个例子:

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    rows = 10,
    cols = 10,
    size = canvas.width / rows,
    width = canvas.width,
    height = canvas.height;
drawGrid();


function drawGrid() {
    // An odd-sized lineWidth means we should translate to draw on whole pixels
    ctx.translate(0.5, 0.5);
    for (var i = 1; i < rows; i++) {
        ctx.moveTo(0, i * size);
        ctx.lineTo(width, i * size);
    }
    for (var j = 1; j < cols; j++) {
        ctx.moveTo(j * size, 0);
        ctx.lineTo(j * size, height);
    }
    // translate back:
    ctx.translate(-0.5, -0.5);
    // setting stroke style and stroking just once
    ctx.strokeStyle = 'rgba(242, 198, 65, 0.1)';
    ctx.stroke();
}

fiddle :http://jsfiddle.net/tZqZv/4/