在HTML5画布上绘制鼠标移动时的半透明线条

Question

我试图让用户通过在画布上绘制半透明线条的"绘画"工具在其上绘画来指定区域.其目的是为将在画布下方绘制的图像指定"蒙版".

这是我到目前为止所尝试的:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var canvasPos = canvas.getBoundingClientRect();

var dragging = false;

drawImage();

$(canvas).mousedown(mouseDown);
$(canvas).mouseup(mouseUp);
$(canvas).mousemove(mouseMove);

function drawImage() {
    var img = new Image();
    img.src = 'http://img2.timeinc.net/health/img/web/2013/03/slides/cat-allergies-400x400.jpg';

    img.onload = function () {
        ctx.drawImage(img, 0, 0);
    };
}

function mouseDown(e) {
    var pos = getCursorPosition(e);

    dragging = true;

    ctx.strokeStyle = 'rgba(0, 100, 0, 0.25)';
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    ctx.lineWidth = 15;
    ctx.beginPath();
    ctx.moveTo(pos.x, pos.y);
}

function mouseUp(e) {
    dragging = false;
}

function mouseMove(e) {
    var pos, i;

    if (!dragging) {
        return;
    }

    pos = getCursorPosition(e);

    ctx.lineTo(pos.x, pos.y);
    ctx.stroke();
}

function getCursorPosition(e) {
    return {
        x: e.clientX - canvasPos.left,
        y: e.clientY - canvasPos.top
    };
}

• 链接到上面代码的jsfiddle:http://jsfiddle.net/s34PL/2/

此示例代码的问题在于,绘制的后续像素使得不透明度变得越来越不可见.我认为这是因为这条线的宽度为15像素(但我希望它宽一点).

我该如何解决这个问题？

谢谢!

Answer 1

问题是你一次又一次地画出了整条道路:

function mouseMove(e) {
    ...
    ctx.stroke(); // Draws whole path which begins where mouseDown happened.
}

您必须只绘制路径的新段(http://jsfiddle.net/jF9a6/).然后......你有15px线宽的问题.

那么如何解决这个问题？我们必须像你一样立刻绘制线条,但避免在现有线条上绘制.这是代码:http://jsfiddle.net/yfDdC/

最大的变化是paths阵列.它包含是的,路径:-)路径是存储在mouseDown和mouseMove函数中的点数组.在mouseDown函数中创建新路径:

paths.push([pos]); // Add new path, the first point is current pos.

在mouseMove中,将当前鼠标位置添加到paths数组中的最后一个路径并刷新图像.

paths[paths.length-1].push(pos); // Append point tu current path.
refresh();

该refresh()函数清除整个画布,再次绘制猫并绘制每条路径.

function refresh() {
    // Clear canvas and draw the cat.
    ctx.clearRect(0, 0, ctx.width, ctx.height);
    if (globImg)
        ctx.drawImage(globImg, 0, 0);

    for (var i=0; i<paths.length; ++i) {
        var path = paths[i];

        if (path.length<1)
            continue; // Need at least two points to draw a line.

        ctx.beginPath();
        ctx.moveTo(path[0].x, path[0].y);
        ... 
        for (var j=1; j<path.length; ++j)
            ctx.lineTo(path[j].x, path[j].y);
        ctx.stroke();

    }
}