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

Question

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

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

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

不知何故，其他绘图应用程序能够平滑这些参差不齐的边缘，同时让用户绘制线条(无论是直的还是非直的)。

有没有办法让这些线变得平滑一些？

演示(选择铅笔工具)：http://devfiles.myopera.com/articles/649/example5.html

我们的应用使用类似的代码。

Answer 1

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

http://jsfiddle.net/NWBV4/10/

Answer 2

至于直线或向量..这篇文章就是你想要的

Drawing GOOD LOOKING (like in Flash) lines on canvas (HTML5) - possible?

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

证明

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

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