javascript - HTML5 canvas 线宽小于 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，您可以在其中“模拟”它。

Answer 1

虽然它没有多大意义，但您可以使用带有 50% 缩放 Canvas 的常规 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>

---

但是，我想知道您希望半像素线在屏幕上看起来如何，抗锯齿？

Right :) I suppose I was thinking on some way of drawing thinner lines, like, for example, when you use CSS styles. I've looked around and I don't think I can use alternate units.

没有办法制作比最小组件单元更小的东西，在我们的例子中是一个像素。您可以通过透明度或不透明度，甚至某种抗锯齿(同样依赖于透明度或相邻像素的着色)来模仿更薄的外观，但不能尝试低于一个像素。

我同意，浏览器中有一种子像素渲染模式，例如，当您使用百分比时，但最后，浏览器只是通过我上面描述的一些修改来渲染完整像素。

---

而且您知道，如果可以渲染小于像素的单位，从技术上讲，您的显示器将具有无限分辨率。我希望这是可能的。 :)