soft edges html5 canvas

Question

所以我創建了一個類似油漆的應用程序，並且我希望在這些線條周圍有柔軟的邊緣，這樣它們就不會鋸齒狀了。要做到這一點很容易，我使用rgba層次筆畫。下面是一些代碼：

$('canvas').mousemove(function(e){ 
    // test if user is pressing down 
    if(going == true){ 
     x = e.pageX; 
     y = e.pageY; 
     // w is the line width, and the last 4 inputs are rgba for the color 
     draw(x,y,w+5,100,100,100,0.1); 
     draw(x,y,w+4,100,100,100,0.3); 
     draw(x,y,w+3,100,100,100,0.5); 
     draw(x,y,w+2,100,100,100,0.7); 
     draw(x,y,w+1,100,100,100,0.9); 
     draw(x,y,w,100,100,100,1); 
    }; 
}); 

起初，這部作品在創建軟邊緣，但出於某種原因，他們淡出你繼續畫，再變成鋸齒狀！這裏是一個比較明顯的顯示器的jsfiddle在模糊變淡（通過使用不同的模糊的顏色筆觸顏色）如何：http://jsfiddle.net/mj4zn/1/

問：

爲什麼會出現這種情況，而且我怎麼能阻止它？

額外的代碼：

如果你想看看draw功能，那就是：

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 
function draw(x,y,w,r,g,b,a){ 
    ctx.lineWidth = w; 
    ctx.lineTo(x, y); 
    ctx.strokeStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')'; 
    ctx.stroke() 
}; 

Answer 1

你得到這種效果的原因是因爲你在鼠標上開始一個新路徑，然後在每個鼠標移動路徑上添加一個新點，然後繪製路徑。這意味着您一次又一次重繪路徑的相同部分，這會將半透明像素添加到一起，從而破壞柔軟度。

我建議只是使用漸變圓作爲「筆刷」。這裏有一個改進的jsfiddle：http://jsfiddle.net/yB3Kr/

主要變化做繪製函數：

function draw(x,y,w,r,g,b,a){ 
    var gradient = ctx.createRadialGradient(x, y, 0, x, y, w); 
    gradient.addColorStop(0, 'rgba('+r+', '+g+', '+b+', '+a+')'); 
    gradient.addColorStop(1, 'rgba('+r+', '+g+', '+b+', 0)'); 

    ctx.beginPath(); 
    ctx.arc(x, y, w, 0, 2 * Math.PI); 
    ctx.fillStyle = gradient; 
    ctx.fill(); 
    ctx.closePath(); 
}; 

這將創建一個點。所以在mousemove中，我們需要多次調用它（取決於自上次mousemove事件以來鼠標座標已經改變了多少）以創建一個連續行，正如您在jsfiddle中所看到的那樣。

Answer 2

檢查，如果這是你想要http://jsfiddle.net/mj4zn/2/

function draw(x,y,w,r,g,b,a){ 
    ctx.lineJoin = 'round'; 
    ctx.lineCap = 'round'; 
    canvas.style.webkitFilter = "blur(1px)"; 
    ctx.lineWidth = w; 
    ctx.lineTo(x, y); 
    ctx.strokeStyle = 'rgba(' + r + ',' + g + ',' + b + ',' +a+ ')'; 

加

什麼

draw(x,y,w+5,0,0,0,0.9);