Question

我正在为画布编写一个绘图程序，允许调整不透明度。然而，当涉及线宽大于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。

旧答案

您可以绘制0.5 alpha的片段，并将不透明度应用于画布，而不是使用1 alpha绘制连续的片段。

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

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

请参阅此修改后的jsFiddle。

自由手绘，没有重叠

1 个答案: