javascript - 自由手绘，无重叠

Question

我正在为 Canvas 编写一个绘画程序，可以调整不透明度。然而，当线宽大于 1 的徒手操作时，线段在一侧会聚，在另一侧发散。我可以用圆圈填充边缘，但仍然存在重叠部分，破坏了不透明颜色的一致性。我刚刚解决了这个问题，我将永远感激任何帮助。

这是我的 jsfiddle .

HTML:

<canvas id="canvas" width="300" height="300"></canvas>
<button onclick="circles='true';">with circles</button>

Javascript:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var mousedown = false;
circles = false;

canvas.onmousedown = function () {
    x0 = event.clientX;
    y0 = event.clientY;
    mouseDown = true;
}

canvas.onmouseup = function () {
    mouseDown = false;
}

canvas.onmousemove = function () {
    if (mouseDown) {
        x1 = event.clientX;
        y1 = event.clientY;

        ctx.beginPath();
        ctx.moveTo(x0, y0);
        ctx.lineTo(x1, y1);
        ctx.closePath();
        ctx.lineWidth = 20;
        ctx.strokeStyle = "rgba(255, 0, 0, .5)";
        ctx.stroke();

        if (circles) {
            ctx.fillStyle = "rgba(255, 0, 0, .5)";
            ctx.arc(x1, y1, 10, 0, 2 * Math.PI);
            ctx.fill();
        }

        x0 = x1;
        y0 = y1;
    }
}

CSS:

canvas {
    border: 1px solid black;
}

Answer 1

新答案

您可以使用 Canvas 属性globalCompositeOperation并将其设置为xor，如下所示:

var ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "xor";

查看此jsFiddle进行演示。

<小时/>

旧答案

您可以绘制 1 Alpha 的片段，并对 Canvas 应用不透明度，而不是使用 0.5 Alpha 绘制连续的片段。

// css
canvas {
    border: 1px solid black;
    opacity: 0.5;
}

// js
ctx.strokeStyle = "rgba(255, 0, 0, 1)";

查看此修改后的jsFiddle .