Linee seghettate lisce disegnate dall'utente in app canvas HTML5?

Question

Abbiamo un'app di disegno HTML5 in cui gli utenti possono disegnare linee usando uno strumento a matita.

Rispetto alle app di disegno basate su Flash, le linee presentano bordi leggermente frastagliati e appaiono leggermente sfocate. Ciò accade perché gli utenti devono mantenere la linea perfettamente dritta mentre si disegna, o l'algoritmo rileva ogni deviazione dei pixel e la proietta come un bordo frastagliato.

Disegnare cerchi lisci e nitidi è impossibile.

In qualche modo, altre applicazioni di disegno sono in grado di appianare questi bordi frastagliati lasciando che gli utenti disegnino linee (diritte o meno).

C'è un modo per appianare queste linee?

Demo (scegliere lo strumento matita): http://devfiles.myopera.com/articles/649/example5.html

nostra applicazione utilizza codice simile.

Answer 1

Ecco un esempio di un modo rapido utilizzando curve di secondo grado e 'round' lineJoin:

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

Answer 2

Per quanto riguarda le linee o vettori .. questo post è quello che volete

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

TL; DR utilizzare SVG

dove CTX è contesto

ctx.lineCap = "round" 

poi per il disegno

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

prova

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

Answer 3

Si potrebbe desiderare di far rispettare una lunghezza minima sulla linea che si disegna. Per fare questo, prendere la sezione matita di quel codice di esempio e modificarlo a qualcosa di simile:

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