更细 html canvas 笔划宽度

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>

更细 html canvas 笔划宽度

Thinner html canvas stroke width

html

canvas

stroke