Canvas 画布边界渲染

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

这里是小提琴：

代码：

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();

var size=10，case_size=18，canvas_size=180，ctx=document.getElementById（'canvas'）.getContext（“2d”）；
ctx.beginPath（）；
对于（var i=0；i，同样的透明度问题也发生在我身上

但是，只要让程序两次调用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();

var size=10，case_size=18，canvas_size=180，ctx=document.getElementById（'canvas'）.getContext（“2d”）；
ctx.beginPath（）；
对于（var i=0；i
ctx.translate（0.5,0.5）
在开始绘制之前：谢谢，它可以工作。但是为什么我需要这样做？它应该在初始比例下工作，不是吗？出于某种原因，画布默认绘制偏移半像素的像素，因此我们需要通过移动它们0.5像素来补偿它，使一个像素与真实像素完全重叠。否则，两个“半”像素像素将被亚像素化，这将导致你看到的两个灰度像素（因为我们不能在屏幕上真正画出半像素）。好吧，我从来没有想到…谢谢你，伙计。可能是重复的