画布讨厌的边框渲染答案

【问题标题】：Canvas nasty border render画布讨厌的边框渲染
【发布时间】：2013-10-23 19:46:04
【问题描述】：

我有一个我无法解决的问题，这是我第一次看到它：我用画布制作了一个网格，我将 1px 黑色边框设置为 globalAlpha 设置为 1，我的边框渲染为 2px 宽度，并且具有轻微的透明度。我在画布上从来没有遇到过这个问题，我用 chrome 和 firefox 对其进行了测试，结果相同。

这里是小提琴：http://jsfiddle.net/EXE4K/

代码：

var size = 10, case_size = 18, canvas_size = 180, ctx = document.getElementById('canvas').getContext("2d");

ctx.beginPath();

for(var i = 0; i <= size; i++) {

    var d = i * case_size;

    ctx.moveTo(0, d);
    ctx.lineTo(canvas_size, d);

   ctx.moveTo(d, 0);
    ctx.lineTo(d, canvas_size);

}

ctx.closePath();

ctx.globalAlpha = 1;

ctx.lineWidth = 1;
ctx.strokeStyle = 'black';

ctx.stroke();

感谢您的帮助。

【问题讨论】：

ctx.translate(0.5, 0.5); 开始绘制之前：jsfiddle.net/AbdiasSoftware/EXE4K/1
谢谢，它有效。但我为什么需要这样做？它应该以最初的规模工作，不是吗？
由于某种原因，画布默认绘制像素偏移半个像素，因此我们需要通过将它们移动 0.5 个像素来补偿它，以便一个像素与真实像素完全重叠。否则，两个“半”像素将被亚像素化，从而导致您看到的两个灰色调像素（因为我们无法在屏幕上真正绘制半像素）。
好吧，我从来没想过...谢谢老兄。
lineTo() method in a for loop 的可能副本

标签： canvas border

【解决方案1】：

我也遇到过同样的透明度问题。

但是，这可以通过要求程序 ctx.stroke(); 来解决。两次。完成代码如下所示：

var size = 10, case_size = 18, canvas_size = 180, ctx = document.getElementById('canvas').getContext("2d");
ctx.beginPath();
for(var i = 0; i <= size; i++) {

var d = i * case_size;

ctx.moveTo(0, d);
ctx.lineTo(canvas_size, d);

ctx.moveTo(d, 0);
ctx.lineTo(d, canvas_size);

}

ctx.closePath();

ctx.globalAlpha = 1;

ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
ctx.stroke();
ctx.stroke();

我希望这会有所帮助！

【讨论】：