HTML5画布应用程序中用户绘制的粗糙线条如何平滑？

Question

我们有一个HTML5绘图应用程序，用户可以使用铅笔工具绘制线条。

与基于Flash的绘图应用程序相比，这些线条的边缘略微呈锯齿状并且看起来有点模糊。这是因为用户需要在绘制时保持线条完全直线，否则算法会感知到每个像素偏差并将其投影为锯齿状边缘。

因此，无法绘制平滑、清晰的圆形。

一些其他绘图应用程序以某种方式能够平滑这些锯齿状边缘，同时让用户绘制线条（无论是直线还是不直线）。

我们是否有办法使这些线条变得平滑？

演示（选择铅笔工具）：http://devfiles.myopera.com/articles/649/example5.html 我们的应用程序使用类似的代码。

- Crashalot

Answer 1

这里有一个快速的方法，使用二次曲线和“round” lineJoin，以下是示例链接：http://jsfiddle.net/NWBV4/10/。

- Simon Sarris

---

谢谢，这非常令人印象深刻。 - Stephen Paul

Answer 2

关于线条或向量...这篇文章是你想要的。

在画布上绘制好看的（像Flash一样）线条 - 有可能吗？

简而言之，使用SVG

其中ctx是上下文。

ctx.lineCap = "round"

然后对于绘图。

ctx.beginPath();
ctx.moveTo(data.line.startX,data.line.startY);
ctx.lineTo(data.line.endX, data.line.endY);
ctx.strokeStyle = data.line.color;
ctx.stroke();

proof

http://gentle-leaf-5790.herokuapp.com/

- samccone

---

哈哈，那个链接有点让人摸不着头脑；突然间我好像在和别人互动画图了。 - JayC

我认为你正在解决错误的问题；lineCap 解决的是两条线段在顶点处相接时应该绘制什么的问题。我认为 OP 是在谈论线段本身的特性，而不是线段相交的位置。 - JayC

谢谢你，但是这些线仍然有些锯齿状的边缘。 - Crashalot

但是我为你的回答点了赞，因为你付出了纯粹的努力和敏锐度。再次感谢！ - Crashalot

谢谢，@samccone，但那篇文章不幸没有解决问题。我们已经看过了。 - Crashalot

Answer 3

你可能想要在绘制的线条上强制执行最小长度。为此，请将示例代码中的铅笔部分更改为以下内容：

  tools.pencil = function () {
    var tool = this;
    // variables for last x, y and min_length of line
    var lx; 
    var ly; 
    var min_length = 3;
    this.started = false;

    // This is called when you start holding down the mouse button.
    // This starts the pencil drawing.
    this.mousedown = function (ev) {
        context.beginPath();
        context.moveTo(ev._x, ev._y);
        tool.started = true;
        // update last x,y coordinates
        lx = ev._x;
        ly = ev._y;
    };

    // This function is called every time you move the mouse. Obviously, it only 
    // draws if the tool.started state is set to true (when you are holding down 
    // the mouse button).
    this.mousemove = function (ev) {

      if (tool.started && (Math.sqrt(Math.pow(lx - ev._x, 2) + Math.pow(ly - ev._y, 2)) > min_length)) {
        context.lineTo(ev._x, ev._y);
        context.stroke();
        lx = ev._x;
        ly = ev._y;
      }
    };

    // This is called when you release the mouse button.
    this.mouseup = function (ev) {
      if (tool.started) {
        tool.mousemove(ev);
        tool.started = false;
        img_update();
      }
    };
  };

- Kodra

---

抱歉，我们尝试使用不同的最小长度进行了测试，但是锯齿状的边缘问题仍然存在。 - Crashalot