Đường lởm chởm được vẽ bởi người dùng trong ứng dụng canvas HTML5?

Question

Chúng tôi có ứng dụng vẽ HTML5 nơi người dùng có thể vẽ các đường bằng công cụ bút chì.

So với các ứng dụng vẽ dựa trên Flash, các đường có cạnh hơi lởm chởm và xuất hiện hơi mờ. Điều này xảy ra bởi vì người dùng cần phải giữ cho đường thẳng hoàn hảo trong khi vẽ hoặc thuật toán cảm nhận mọi độ lệch pixel và dự đoán nó như là một cạnh lởm chởm.

Không thể vẽ các vòng tròn sắc nét và mịn.

Bằng cách nào đó, các ứng dụng vẽ khác có thể làm mịn các cạnh lởm chởm này trong khi cho phép người dùng vẽ các đường thẳng (thẳng hoặc không).

Có cách nào chúng ta có thể làm mịn những dòng này không?

Demo (chọn công cụ bút chì): http://devfiles.myopera.com/articles/649/example5.html

ứng dụng của chúng tôi sử dụng mã tương tự.

Answer 1

Dưới đây là một ví dụ về một cách nhanh chóng sử dụng các đường cong bậc hai và 'tròn' lineJoin:

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

Answer 2

Đối với dòng hoặc vectơ .. bài này là những gì bạn muốn

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

TL; DR sử dụng SVG

nơi ctx là bối cảnh

ctx.lineCap = "round" 

sau đó cho bản vẽ

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

bằng chứng

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

Answer 3

Bạn có thể muốn thực thi một chiều dài tối thiểu trên dòng được rút ra. Để làm điều này, lấy phần bút chì của rằng ví dụ mã và thay đổi nó thành một cái gì đó như thế này:

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