1

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

无论如何要使用画布 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();
        },
4

2 回答 2

2

使用globalCompositeOperation="xor"并设置 a globalAlpha< 1。

于 2018-01-03T18:10:08.543 回答
0

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

source-atop 和destination-atop 都可以工作

于 2013-07-23T09:47:30.283 回答