画布描边和填充颜色

Question

问题是描边不透明度低于填充不透明度，并且我无法使描边颜色与填充颜色具有相同的不透明度。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle = "rgba(255,0,0,1)";
ctx.fillStyle = "rgba(255,0,0,1)";
ctx.strokeRect(20, 20, 25, 25);
ctx.fillRect(20, 50, 25, 25);

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>

如果我们将 fillStyle 不透明度设置为 0.5，那么它们将是相同的，但我们不能提高描边的不透明度。

那么如何设置描边颜色与填充颜色相同呢？

Answer 1

它们的颜色完全相同。问题是抗锯齿。

如果将其加宽，您可以检查笔画看起来是否更暗。

ctx.lineWidth = 5;

笔画的中心部分会呈现强烈的红色，但边缘部分会呈现不饱和的红色。

遗憾的是，您可以控制它（即关闭它），因为它取决于浏览器。

您可以在另一个问题中阅读更多相关信息（并寻找替代方案）。

对我来说效果更好的技巧是将画布平移半像素距离。

ctx.translate(0.5, 0.5);

有人建议这里和这里。我不能确定是否会在每个浏览器中达到预期的效果（我在 Firefox 上测试过）。

ctx.lineWidth = 5;

ctx.translate(0.5, 0.5);