HTML Canvas：矩形描边显示为透明答案

【问题标题】：HTML Canvas: rectangle stroke appears transparentHTML Canvas：矩形描边显示为透明
【发布时间】：2020-06-23 06:23:14
【问题描述】：

老实说，我不知道这是我的眼睛在看我，还是画布实际上变得透明了。然而，这个问题对我来说似乎很清楚：当我使用strokeRect（笔画矩形）时，无论我做什么，笔画似乎都是透明的。

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

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

我的代码很简单：

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

这甚至可能是我可能知道的默认行为，我该如何“解决”这个问题？

【问题讨论】：

您是说使用描边时只看到矩形的轮廓？如果是这样，那是正常行为。使用 fillStyle 创建一个填充矩形。
不，问题是#F5F5F5 的颜色显示为0.75 的不透明度（随机十进制示例）。
它是灰色的 - 灰色总是看起来那样 - 你可能有一个糟糕的显示让它变得更糟？
这就是我的想法，但是 fill 显然是完全 100% 的不透明度。这太奇怪了，因为我可以正确看到任何其他 #FFF 和 #F5F5F5，采取例如文本。

标签： javascript html canvas html5-canvas

【解决方案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>

【讨论】：