Гладкие неровные линии, нарисованные пользователем в приложении HTML5 canvas?

Question

У нас есть приложение для рисования в HTML5, где пользователи могут рисовать линии с помощью инструмента карандаша.

По сравнению с приложениями для рисования на основе Flash линии имеют слегка неровные края и выглядят несколько размытыми.Это происходит из-за того, что пользователям необходимо держать линию идеально ровной во время рисования, или алгоритм распознает каждое отклонение пикселя и проецирует его как неровный край.

В результате невозможно нарисовать плавные, острые круги.

Каким-то образом другие приложения для рисования могут сгладить эти неровные края, позволяя пользователям рисовать линии (прямые или нет).

Есть ли способ, которым мы можем сгладить эти линии?

Демонстрация(выберите карандашный инструмент): http://devfiles.myopera.com/articles/649/example5.html

Наше приложение использует похожий код.

Answer 1

Вот пример быстрого способа с использованием квадратичных кривых и «округления» lineJoin:

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

Answer 2

Что касается линий или векторов .. этот пост - то, что вам нужно

Рисование ХОРОШЕГО ИЩЕНИЯ (как во Flash) линий на холсте (HTML5) - возможно?

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