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