Question

我已经阅读了相同标题的帖子，它很有用，但没有回答我的问题。我的绘图程序允许用户在图像上自由绘制宽线;但是，我不希望透明度在两次相同的空间内重叠线条时变暗。

无论如何使用canvas lineTo，stroke，strokeStyle等进行绘制，这样就不会发生这种情况。下面是一个代码片段，用于说明我的所作所为：

drawPencilDown: function(e, $this)
        {
            $this.ctx.lineJoin = "round";
            $this.ctx.lineCap = "round";
            $this.ctx.strokeStyle = "rgba(255, 255, 255, 1.0)";
            $this.ctx.fillStyle   = "rgba(255, 255, 255, 0.5)";

            $this.ctx.lineWidth = $this.settings.lineWidth;         
            //draw single dot in case of a click without a move
            $this.ctx.beginPath();
            $this.ctx.arc(e.pageX*sx, e.pageY*sy, $this.settings.lineWidth/2, 0, Math.PI*2, true);
            $this.ctx.closePath(); 
            $this.ctx.fill();
            $this.ctx.beginPath(); 
            $this.ctx.moveTo(e.pageX*sx, e.pageY*sy); 
        },

        drawPencilMove: function(e, $this)
        {
            $this.ctx.lineTo(e.pageX*sx, e.pageY*sy);
            $this.ctx.stroke();
        },

        drawPencilUp: function(e, $this)
        {
            $this.ctx.closePath();
        },

Answer 1

使用globalCompositeOperation="xor"并设置globalAlpha＆lt; 1.

Answer 2

我认为你应该使用globalCompositeOperation属性： https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

这两个 source-atop和 destination-atop会起作用

绘制重叠的半透明线条，不会在重叠处变暗

2 个答案: