HTML Canvas：矩形笔划显示为透明

Question

坦白地说，老实说，我不知道这是不是我的眼睛和我一样，或者画布实际上是透明的。然而，这个问题对我来说似乎非常清楚：当我使用strokeRect（笔画矩形）时，无论我做什么，笔画看起来都是透明的。

查看笔画的截图：http://prntscr.com/ijeiu9

查看普通填充的屏幕截图：http://prntscr.com/ijeiz7

我的代码很简单：

context.strokeStyle = "#F5F5F5";
context.strokeRect(128, 488, 400, 26);

这甚至可能是我所知道的默认行为，我该如何修复＆＃39;此？

Answer 1

MDN documentation描述了这种情况如下：

  

获得清晰的线条需要了解如何抚摸路径。在   在下面的图像中，网格表示画布坐标网格。该   网格线之间的正方形是实际的屏幕像素。在第一个   在下面的网格图像中，填充从（2,1）到（5,5）的矩形。该   它们之间的整个区域（浅红色）落在像素边界上，所以   生成的填充矩形将具有清晰的边缘。

     

     

如果考虑从（3,1）到（3,5）的路径，线宽为   1.0，你最终得到了第二张图片中的情况。要填充的实际区域（深蓝色）仅延伸到像素上的一半   路径的两边。必须渲染一个近似值，   这意味着那些像素只是部分遮蔽，结果   在整个区域（淡蓝色和深蓝色）被填充   颜色只有实际描边颜色的一半。

这意味着要获得清晰的宽度1，你应该从一半像素开始你的矩形：

let a = document.getElementById("a");
let ac = a.getContext("2d");

ac.strokeStyle = "#F5F5F5";
ac.lineWidth = 1;
ac.strokeRect(20, 20, 150, 100);

let b = document.getElementById("b");
let bc = b.getContext("2d");

bc.strokeStyle = "#F5F5F5";
bc.lineWidth = 1;
bc.strokeRect(20.5, 20.5, 150, 100);

canvas {width: 300px; height: 150px; background-color:black}

<canvas id="a"></canvas>
<canvas id="b"></canvas>