如何保持线条的边缘像素不是半透明的?

时间:2015-04-07 18:50:54

标签: javascript html html5 canvas transparency

我正在使用HTML画布,它的像素宽度和高度是32倍。然而,当我在其上绘制线条时,我注意到线条的边缘像素是半透明地绘制的(正好是一半透明)。有办法阻止这个吗?

this picture中,红线是从一个点到另一个点的单条线。我希望所有的块都是黑色或#FF0000红色。

N.B。我已经使用canvas.translate()来正确对齐像素,并使用this post中的解决方案来渲染离散块中的扩展像素。

1 个答案:

答案 0 :(得分:4)

问题背景

Canvas使用消除锯齿功能使图形看起来更加流畅,这就是为什么它在这里和那里填充半透明像素的原因(请参阅this explanation了解其工作原理)。

平滑(也称为插值)可以关闭,但仅适用于图像(ctx.imageSmoothingEnabled = false,顾名思义)。

解决方案

为此,需要实施“线条渲染器”。然而,典型的线算法仅支持宽度为1像素的线。这包括Bresenham以及EFLA(Po-Han Lin的极快线算法),后者比Bresenham快。

对于厚度大于1像素的线条,您需要找到切线角度,然后沿主线渲染每个线段。

我提供了以下两种实现,我已经在某种程度上进行了优化。他们都不需要访问位图本身,只提供上下文。

您唯一需要记住的是使用fillStyle(和fill())代替strokeStyle(和stroke())来设置其颜色。您可以在填充之前生成多条线,这通常比填充每个线段更快,只要它们使用相同的颜色。

您可以选择直接使用图像数据并设置像素,但速度较慢,如果您使用图像则需要CORS(如果首选,请使用带有Uint32视图的位图。还有一些特殊的技巧来加速这个方法,但这里没有提到它们。)

EFLA(极速线路算法)

此算法适用于绘制连续多边形线的位置,即。最后一点没有设定。但在下面的实现中,我们手动设置它,以便它可以用于单线段。

访问上面的链接网站,以获得更深入的解释(以及许可证)。

只需确保输入值为整数值:

function lineEFLA(ctx, x1, y1, x2, y2) {

    var dlt, mul, yl = false, i,
        sl = y2 - y1,
        ll = x2 - x1,
        lls = ll >> 31,
        sls = sl >> 31;

    if ((sl ^ sls) - sls > (ll ^ lls) - lls) {
        sl ^= ll;
        ll ^= sl;
        sl ^= ll;
        yl = true;
    }

    dlt = ll < 0 ? -1 : 1;
    mul = (ll === 0) ? sl : sl / ll;

    if (yl) {
        x1 += 0.5;  // preset for rounding
        for (i = 0; i !== ll; i += dlt) setPixel((x1 + i * mul)|0, y1 + i);
    }
    else {
        y1 += 0.5;
        for (i = 0; i !== ll; i += dlt) setPixel(x1 + i, (y1 + i * mul)|0);
    }
    setPixel(x2, y2);   // sets last pixel

    function setPixel(x, y) {ctx.rect(x, y, 1, 1)}
}

的Bresenham

这是过去许多应用程序和计算机中使用的经典线算法,需要渲染一条简单的线。

详细解释了算法here

function lineBresenham(ctx, x1, y1, x2, y2) {

    if (x1 === x2) {  // special case, vertical line
        ctx.rect(x1, Math.min(y1, y2), 1, Math.abs(y2 - y1) + 1);
        return;
    }

    if (y1 === y2) {  // special case, horizontal line
        ctx.rect(Math.min(x1, x2), y1, Math.abs(x2 - x1) + 1, 1);
        return;
    }

    var dx = Math.abs(x2 - x1), sx = x1 < x2 ? 1 : -1,
        dy = Math.abs(y2 - y1), sy = y1 < y2 ? 1 : -1,
        err = (dx > dy ? dx : -dy) * 0.5;

    while(!0) {
        ctx.rect(x1, y1, 1, 1);
        if (x1 === x2 && y1 === y2) break;
        var e2 = err;
        if (e2 > -dx) { err -= dy; x1 += sx; }
        if (e2 < dy)  { err += dx; y1 += sy; }
    }
}

包括缩放的现场演示

var ctx = document.querySelector("canvas").getContext("2d");

ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); // bg color
ctx.scale(20, 20); // scale

ctx.fillStyle = "#f00"; // color for line in this case

lineEFLA(ctx, 0, 0, 17, 20); // algo 1
lineBresenham(ctx, 3, 0, 20, 20); // algo 2

ctx.fill(); // fill the rects, use beginPath() for next

function lineEFLA(ctx, x1, y1, x2, y2) {

  /* x1 |= 0; // make sure values are integer values
   x2 |= 0;
   y1 |= 0;
   y2 |= 0;*/

  var dlt,
    mul,
    sl = y2 - y1,
    ll = x2 - x1,
    yl = false,
    lls = ll >> 31,
    sls = sl >> 31,
    i;

  if ((sl ^ sls) - sls > (ll ^ lls) - lls) {
    sl ^= ll;
    ll ^= sl;
    sl ^= ll;
    yl = true;
  }

  dlt = ll < 0 ? -1 : 1;
  mul = (ll === 0) ? sl : sl / ll;

  if (yl) {
    x1 += 0.5;
    for (i = 0; i !== ll; i += dlt)
      setPixel((x1 + i * mul) | 0, y1 + i);
  } else {
    y1 += 0.5;
    for (i = 0; i !== ll; i += dlt)
      setPixel(x1 + i, (y1 + i * mul) | 0);
  }
  setPixel(x2, y2); // sets last pixel

  function setPixel(x, y) {
    ctx.rect(x, y, 1, 1)
  }
}

function lineBresenham(ctx, x1, y1, x2, y2) {

  if (x1 === x2) { // special case, vertical line
    ctx.rect(x1, Math.min(y1, y2), 1, Math.abs(y2 - y1) + 1);
    return;
  }

  if (y1 === y2) { // special case, horizontal line
    ctx.rect(Math.min(x1, x2), y1, Math.abs(x2 - x1) + 1, 1);
    return;
  }

  var dx = Math.abs(x2 - x1),
    sx = x1 < x2 ? 1 : -1,
    dy = Math.abs(y2 - y1),
    sy = y1 < y2 ? 1 : -1,
    err = (dx > dy ? dx : -dy) * 0.5;

  while (!0) {
    ctx.rect(x1, y1, 1, 1);
    if (x1 === x2 && y1 === y2) break;
    var e2 = err;
    if (e2 > -dx) {
      err -= dy;
      x1 += sx;
    }
    if (e2 < dy) {
      err += dx;
      y1 += sy;
    }
  }
}
<canvas width=400 height=400></canvas>

提示:这些实现可以通过对垂直和水平线使用单个rect()进一步优化(显示为Bresenham,而不是EFLA)。 setPixel()用于灵活性(例如,它可以重写以设置位图像素等)。