HTML5画布线条宽度小于1像素

Question

有没有办法绘制一个矩形，使其构成的线条宽度小于1像素？

这段代码完美地实现了预期的效果：

// context is a HTML5 canvas 2D context
context.lineWidth = 1;
context.strokeStyle = "black";
context.rect(0, 0, 20, 20);
context.stroke();

它画了一个漂亮的矩形。 但是，如果我尝试用更细的线条画一个矩形：

// See line width
context.lineWidth = 0.5;
context.strokeStyle = "black";
context.rect(0, 0, 20, 20);
context.stroke();

它仍然绘制一个边框为1像素宽的矩形。

我在这里处理的是canvas对象，而不是CSS，CSS中有模拟这种效果的方法。

- diegoesp

---

你如何在屏幕上表示0.5像素的线？ - Shomz

好的 :) 我想我在考虑如何绘制更细的线条，比如当您使用 CSS 样式时。我已经四处查找了，我认为我不能使用替代单位。 - diegoesp

可能是重复的问题：CSS边框小于1px。 - BSMP

你还不如要求半个原子。不过我忘记了当你把它们分开时会发生什么。 - zero298

JDX是一个框架，模拟画布的功能，您可以通过定义CSS类来设置<1像素 http://js2dx.com - Gonki

Answer 1

尽管这听起来不太合理，但是您可以使用带有50％缩放画布的普通1像素线来实现（但再次强调，这仅仅是1像素的呈现，详见下文）。请参阅以下代码示例：

var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');

function scale() {
  context.scale(0.5, 0.5);
  draw();
}

function draw() {
  context.beginPath();
  context.moveTo(100, 150);
  context.lineTo(450, 50);
  context.stroke();
}

draw()

<canvas width="400" height="150"></canvas>
<button onclick="scale()">Scale down</button>

---

但是，我想知道你如何期望屏幕上的半像素线看起来像什么，抗锯齿吗？

没错 :) 我想我考虑了一些绘制更细的线条的方法，比如当你使用 CSS 样式时。我找过了，我不认为我可以使用其他单位。

在我们的情况下，即像素，没有办法制作比最小组件单元更小的东西。您可以通过透明度、或者某种抗锯齿（再次依赖于相邻像素的颜色或透明度）来模仿更细的外观，但不能试图低于一个像素。

我同意，在浏览器中有子像素渲染模式，例如，当您使用百分比时，但最终，浏览器只会用上述修改渲染完整像素。

---

而且，如果您可以呈现比像素更小的单位，则从技术上讲，您可以在显示器上获得无限分辨率。我希望这是可能的。:)

- Shomz

---

嘿，没问题！我希望你能使用缩放版本来实现你想要的目标。 - Shomz

@Shomz canvas API 可以呈现到 0.03 像素的子像素分辨率。尝试使用 'ctx.fillStyle = "#FFF"; ctx.fillRect(0,0,0.03,1);d = ctx.getImageData(0,0,1,1).data;将会得到[255,255,255,1]`，宽度为 0.5 时将会得到 [255,255,255,113]。我经常使用子像素渲染，渲染 API 在表示子像素绘图方面做得非常好。 - Blindman67

@Blindman67 我知道，你也可以在我的缩放示例中看到它，但我指的是如果OP想要绘制比1像素更细的线条，你会如何在你的显示器上表示亚像素。 - Shomz

问题是（也许），即使您指定1像素，线条也会用2个像素绘制。请参见https://dev59.com/DmYr5IYBdhLWcg3wM3f6 - Fredo

@Fredo，没错，但是OP想要一条比1px更细的线。 - Shomz