javascript - 如何制作快速的非抗锯齿HTML5canvas基本绘图功能？

Question

我尝试在 Canvas 中执行抗锯齿绘图功能。感谢本网站上关于 Canvas 和别名的所有 super 答案。

这是演示:https://jsfiddle.net/garciaVvV/eu34c8sy/12/

这是 js 行:

function lineXY(mouseX, mouseY, mouseXX, mouseYY){
  var x0= mouseX;
  var y0= mouseY;
  var x1= mouseXX;
  var y1= mouseYY;

var coordinatesArray = [];
// Translate coordinates
// Define differences and error check
var dx = Math.abs(x1 - x0);
var dy = Math.abs(y1 - y0);
var sx = (x0 < x1) ? 1 : -1;
var sy = (y0 < y1) ? 1 : -1;
var err = dx - dy;
// Set first coordinates
coordinatesArray.push([x0,y0]);

// Main loop
while (!((x0 == x1) && (y0 == y1))) {
  var e2 = err << 1;
  if (e2 > -dy) {
    err -= dy;
    x0 += sx;
  }
  if (e2 < dx) {
    err += dx;
    y0 += sy;
  }
  // Set coordinates
coordinatesArray.push([x0,y0]);
  // Return the result
}

 for(var i=0;i<coordinatesArray.length;i++) {
   aliasedCircle(ctx, coordinatesArray[i][0], coordinatesArray[i][1], 100);
 }
}

是什么让它在用大笔快速绘图时出现抖动？以及如何让它变甜？

谢谢

Answer 1

主要原因当然是生成了相当多的路径，首先是圆，然后是重现圆路径 x 每个像素长度的线。

我们可以做几件事来改善这一点:

• 我们可以将圆缓存为图像并将其用作位图画笔。这消除了为直线中的每个点重新生成圆中所有直线的需要。仅当大小或颜色发生变化时才需要更新画笔。

• 我们不必绘制直线的每个点，我们可以找到一种方法来计算在需要绘制之前可以跳过多少像素，但更好的选择是:

  <

• 我们可以通过在第一个点和最后一个点之间画一条粗线而不是每个点画一个圆来“作弊”。

• 最后，我们可以在每个帧而不是每个事件上注册鼠标以减少负载。

第一点很简单:只需创建一个画笔大小(直径)的屏幕外 Canvas 并绘制。要更改颜色，请重新生成画笔(或使用复合模式并在其上绘制):

// show brush
document.body.appendChild(createBrush(150, "#09f"));

function createBrush(radius, color) {
  var ctx = document.createElement("canvas").getContext("2d");
  ctx.canvas.width = ctx.canvas.height = radius<<1; 
  ctx.fillStyle = color;            
  aliasedCircle(ctx, radius, radius, radius);
  ctx.fill();                  
  return ctx.canvas
}

function aliasedCircle(ctx, xc, yc, r) {   // NOTE: for fill only!
  var x = r, y = 0, cd = 0;

  // middle line
  ctx.rect(xc - x, yc, r<<1, 1);

  while (x > y) {
    cd -= (--x) - (++y);
    if (cd < 0) cd += x++;
    ctx.rect(xc - y, yc - x, y<<1, 1);  // upper 1/4
    ctx.rect(xc - x, yc - y, x<<1, 1);  // upper 2/4
    ctx.rect(xc - x, yc + y, x<<1, 1);  // lower 3/4
    ctx.rect(xc - y, yc + x, y<<1, 1);  // lower 4/4
  }
}

现在我们有了一个图像/位图画笔，我们可以看看如何绘制线条。我们可以使用两种方法。既然你想要它别名，我们必须以某种方式妥协。

在我们工作的上下文中，使用 Bresenham 绘制和填充线条可能会非常慢。多次绘制圆圈也很慢。

第三种选择是使用上下文自己的线并“破解”边缘(当然，如果所有这些都是为了改进桶填充的填充，引用上一个问题，我可能会花精力改进桶填充算法代替 :))。

所以让我们试试第三个选项。我们既需要内线机制，也需要布雷森纳姆。挑战在于让 Bresenham 准确地覆盖边缘。

var ctx = c.getContext("2d");

drawLine(ctx, 60, 60, 250, 210, 50);
ctx.stroke();

function drawLine(ctx, x1, y1, x2, y2, radius) {
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.lineWidth = radius<<1;
  ctx.lineCap = "butt";
}

<canvas id=c height=300></canvas>

让我们添加 Bresenham，实际上，让我们使用更快的线算法:EFLA并尝试匹配边缘 - 现在，这可能并非在所有情况下都是完美的，并且可能必须调整偏移量(或者更确切地说是 native 绘制操作的线宽。)。

我们还需要计算两侧 Angular 90° 偏移。我们可以切换 cos/sin，而不是加减 90°。

var ctx = c.getContext("2d");
var x1 = 60, y1 = 60, x2 = 250, y2 = 210, r = 50;

ctx.globalAlpha = 0.25;
drawLine(ctx, x1, y1, x2, y2, r);
ctx.stroke();
ctx.beginPath();
ctx.globalAlpha = 1;

// calc angle
var diffX = x2 - x1,
    diffY = y2 - y1,
    angle = Math.atan2(diffY, diffX);

// two edge lines offset per angle
var lx1 = x1 - r * Math.sin(angle),
    ly1 = y1 + r * Math.cos(angle),
    lx2 = x2 - r * Math.sin(angle),
    ly2 = y2 + r * Math.cos(angle),
    rx1 = x1 + r * Math.sin(angle),
    ry1 = y1 - r * Math.cos(angle),
    rx2 = x2 + r * Math.sin(angle),
    ry2 = y2 - r * Math.cos(angle);

fastLine(ctx, lx1|0, ly1|0, lx2|0, ly2|0);
fastLine(ctx, rx1|0, ry1|0, rx2|0, ry2|0);
ctx.fill();

function drawLine(ctx, x1, y1, x2, y2, radius) {
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.lineWidth = radius<<1;
  ctx.lineCap = "butt";
}

function fastLine(ctx, x1, y1, x2, y2) {
  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)
      ctx.rect((x1 + i * mul)|0, y1 + i, 1, 1)
  }
  else {
    y1 += 0.5;
    for (i = 0; i !== ll; i += dlt)
      ctx.rect(x1 + i, (y1 + i * mul)|0, 1, 1)
  }
}

<canvas id=c height=300></canvas>

最后，如果我们合并组件并稍微重构一下，我们就会得到一个利用这些方法的简洁的别名线绘制机制:

var ctx = c.getContext("2d");
var x1 = 0, y1 = 0, r = 90;
var brush = createBrush(r, "#000");

document.querySelector("button").onclick = function() {
  ctx.beginPath();
  ctx.clearRect(0,0,c.width,c.height);
};

// mouse move handler using rAF.
c.onmousemove = function(e) {
  requestAnimationFrame(function() {
    var x2 = e.clientX|0, y2=e.clientY|0;
    aliasedLine(ctx, x1, y1, x2, y2, r);
    x1 = x2;
    y1 = y2;
  })
};

function aliasedLine(ctx, x1, y1, x2, y2, radius) {
  // calc angle
  var diffX = x2 - x1,
      diffY = y2 - y1,
      angle = Math.atan2(diffY, diffX),

      // two edge lines offset per angle
      lx1 = x1 - radius * Math.sin(angle),
      ly1 = y1 + radius * Math.cos(angle),
      lx2 = x2 - radius * Math.sin(angle),
      ly2 = y2 + radius * Math.cos(angle),
      rx1 = x1 + radius * Math.sin(angle),
      ry1 = y1 - radius * Math.cos(angle),
      rx2 = x2 + radius * Math.sin(angle),
      ry2 = y2 - radius * Math.cos(angle);

  // main line
  ctx.beginPath();
  drawLine(ctx, x1, y1, x2, y2, radius);
  ctx.stroke();
  
  // aliased edges
  ctx.beginPath();
  fastLine(ctx, lx1|0, ly1|0, lx2|0, ly2|0);
  fastLine(ctx, rx1|0, ry1|0, rx2|0, ry2|0);
  ctx.fill();

  // caps
  ctx.drawImage(brush, x1 - radius, y1 - radius)
  ctx.drawImage(brush, x2 - radius, y2 - radius)
}


function createBrush(radius, color) {
  var ctx = document.createElement("canvas").getContext("2d");
  ctx.canvas.width = ctx.canvas.height = 1 + radius<<1; 
  ctx.fillStyle = color;            
  aliasedCircle(ctx, radius, radius, radius);
  ctx.fill();                  
  return ctx.canvas
}

function aliasedCircle(ctx, xc, yc, r) {   // NOTE: for fill only!
  var x = r, y = 0, cd = 0;

  // middle line
  ctx.rect(xc - x, yc, r<<1, 1);

  while (x > y) {
    cd -= (--x) - (++y);
    if (cd < 0) cd += x++;
    ctx.rect(xc - y, yc - x, y<<1, 1);  // upper 1/4
    ctx.rect(xc - x, yc - y, x<<1, 1);  // upper 2/4
    ctx.rect(xc - x, yc + y, x<<1, 1);  // lower 3/4
    ctx.rect(xc - y, yc + x, y<<1, 1);  // lower 4/4
  }
}

function drawLine(ctx, x1, y1, x2, y2, radius) {
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.lineWidth = radius<<1;
}

function fastLine(ctx, x1, y1, x2, y2) {
  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)
      ctx.rect((x1 + i * mul)|0, y1 + i, 1, 1)
  }
  else {
    y1 += 0.5;
    for (i = 0; i !== ll; i += dlt)
      ctx.rect(x1 + i, (y1 + i * mul)|0, 1, 1)
  }
}

#c {background:#aaa}

<canvas id=c width=1200 height=800></canvas>
<br><button>Clear</button>

一些最后的注意事项:请注意它可能并不完美，在别名方面，尤其是在几乎 0/90° 的线条中。这是因为由于样本数量的原因，可以有很多点形成一条精细的渐变线，而 EFLA 线无法用其单个像素点覆盖。

一种替代方法是制作多边形填充(如 scanline )实现。它涉及更多的数学和步骤，但在可接受的性能下是可行的。