Javascript 用户在HTML5画布应用程序中绘制的平滑锯齿线？

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

与基于Flash的绘图应用程序相比，这些线条的边缘略微参差不齐，看起来有些模糊。这是因为用户在绘制时需要保持直线完全笔直，或者算法检测到每个像素偏差并将其投影为锯齿状边缘

因此，绘制平滑、尖锐的圆是不可能的

不知何故，其他绘图应用程序能够平滑这些锯齿状边缘，同时允许用户绘制直线（直线或非直线）

我们有没有办法消除这些界线

演示（选择铅笔工具）：

---

我们的应用程序使用了类似的代码。

作为直线或向量。。这篇文章正是你想要的

TL；DR使用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();

证明

---

您可能希望在绘制的直线上强制执行最小长度。要做到这一点，请使用该示例代码的铅笔部分，并将其更改为如下内容：

  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();
      }
    };
  };

---

下面是一个使用二次曲线和“圆形”直线连接的快速方法示例：

---

LOL，这个链接有点像WTF；突然之间，我似乎在与人互动，画一些东西。我认为你在解决错误的问题

lineCap

解决了两条线由一个顶点连接的问题以及应该在那里绘制什么。我认为OP谈论的是线条本身的质量，而不是线条连接的地方。谢谢你，但是线条仍然包含一些锯齿状的边缘。但是我在纯粹的努力和反应方面对你的答案投了更高的票。再次感谢！谢谢，@samccone，但不幸的是，这篇文章没有解决这个问题。我们已经看过了。对不起，我们尝试了不同的最小长度，但是锯齿状的边缘仍然是一个问题。谢谢，这非常令人印象深刻