软边缘 HTML5 画布

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

- Ryan Saxe

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中所看到的那样。

- Strille

---

这太聪明了！！！我之前尝试过渐变，但它会导致延迟！这个不会，谢谢。 - Ryan Saxe

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

- Raza

---

这会模糊整个画布，这不是我想要的，因为上面可能还有图像和文本。 - Ryan Saxe