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