主页 / 问题 / 560422
Accepted
Rennorb
Asked:2020-08-29 05:36:33 +0000 UTC2020-08-29 05:36:33 +0000 UTC

如何去除 Canvas 元素上的抗锯齿？

  • 772

有一个像这样的javascript代码：

function updateGrid()
{
  cntx.strokeStyle = 'white';
  cntx.lineCap = 'butt';
  cntx.lineWidth = 1;
  for(var x = 0; x < canvas.width; x++)
  {
      cntx.beginPath();
      cntx.moveTo(x * cellSize + move.x, move.y);
      cntx.lineTo(x * cellSize + move.x, canvas.width * cellSize+move.y);
      cntx.stroke();  
      cntx.closePath()
  }
}

它应该画canvas.width 白线，一个像素粗。但事实证明，在屏幕截图中：

我在某个论坛上读到，删除该行会有所帮助cntx.beginPath();。但如果没有它，就会画出更奇怪的东西：

在另一个论坛上，他们说线宽可能小于一个。在下图中，宽度.0，没有线cntx.beginPath();：

这是她的：

告诉我如何摆脱它？

javascript

2 个回答

  1. Best Answer

    1px当您尝试使用坐标绘制一条宽度为 的线时，x=(1, 0); y=(1, 3);它将跨越0.5px线的每一侧，导致其宽度为2px.

    这是由于显示器无法显示半个像素。

    鉴于

    为了绘制一条宽度为 1 的线，1px您需要从半个像素计算坐标，即x=(1, 0); y=(1, 3);代替x=(1.5, 0); y=(1.5, 3)

    结果，浏览器将在0.5px每一侧绘制一条线，从而在1px.

    结果

    例子。第一行有颜色#ffffff，第二行#808080。区别仅在于坐标。

    颜色差异是由于问题中提到的抗锯齿造成的。

    抗锯齿

    当线条通过半个像素时，它变成灰色，否则图像会出现锯齿。像素的颜色是通过考虑伽玛的抖动过程选择的。像素将以图像颜色和背景颜色之间的中间颜色着色。

    您的情况发生了类似的操作。

    在这种情况下，抗锯齿无法关闭，如果drawImage.

    Canvas - 深入 HTML5

    • 11

  2. 显然，您通过样式设置画布的尺寸，但必须通过元素的属性来设置canvas。

    <canvas width="100" height="200"></canvas>

    否则，图像将从默认大小拉伸。

    另一个特点：视网膜屏幕有两倍的点数，因此需要减小此类屏幕的尺寸：在属性中，例如 setwidth="200"和在样式中width:100px

    我会加：

    还有另一个功能，当您绘制一条线时，它会显示两个像素之间的坐标。因此，您要么需要将 0.5 添加到您的坐标：

    context.lineTo(x + 0.5, y + 0.5);

    或者这样做：

    ctx.translate(0.5, 0.5);
    • 4

相关问题