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％缩放画布的常规1像素线来实现这一点（但同样它是1像素的再现，请阅读下文）。请参阅以下代码段：

＆＃13;

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()

＆＃13;

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

＆＃13;

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

正确:)我想我正在考虑绘制更细的线条，比如，当你使用CSS样式时。我环顾四周，我不认为我可以使用替代单位。

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

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

而且你知道如果渲染单位小于像素，你在显示器上技术上会有无限的分辨率。我希望有可能。：）

HTML5画布线宽小于1像素

1 个答案: