javascript - 软边 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 中所见。