javascript - 在 HTML5 canvas 中通过鼠标移动绘制半透明线条

Question

我试图让用户通过使用在 Canvas 上绘制半透明线条的“绘画”工具在其上绘画来指定区域。它的目的是为将在 Canvas 下方绘制的图像指定一个“掩码”。

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

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() 函数清除整个 Canvas ，再次绘制猫并绘制每条路径。

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

    }
}