更薄的HTML画布笔触宽度

Question

我将2d context的行宽设置为其明显的最小值1：

  let context = this._canvas.getContext("2d");
  context.lineWidth = 1;
  context.stroke();

但这仍然很宽：也许20像素。有什么办法可以减少它？

Answer 1

关键是要确保虚拟像素数与实际像素数相同。屏幕像素更多，图像缩放更大。屏幕像素少，图像缩小。 放大1像素宽的线会产生矩形，但是当我们缩小1像素线时会发生什么呢？简单的答案是它变得不那么紧张。

下面的示例绘制2个相同大小的画布。不过，关键的区别在于它们各自具有的像素缓冲区的大小。第一个像素为10,000像素-100x100。第二个只有100像素-10x10。即使我们刚刚画了一条1像素宽的线，您也可以看到这些线的外观截然不同。

window.addEventListener('load', onLoaded, false);
function onLoaded(evt)
{
  let can = document.querySelector('canvas');
  let ctx = can.getContext('2d');
  ctx.moveTo(0,0);
  ctx.lineTo(can.width,can.height);
  ctx.stroke();
  
  let can2 = document.querySelectorAll('canvas')[1];
  let ctx2 = can2.getContext('2d');
  ctx2.moveTo(0,0);
  ctx2.lineTo(can2.width,can2.height);
  ctx2.stroke();
}

canvas
{
  width: 100px;
  height: 100px;
}

<canvas width=100 height=100></canvas><br>
<canvas width=10 height=10></canvas>