重叠绘制重叠的半透明线条而没有变暗

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

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

来源

2013-02-09 user2057357

如何绘制所有形状到alpha 1，然后设置你的canva不透明度.5 - 那么你可能想要为几个不同的对象组重叠几个画布。 SVG也适用于此。 – mika 2013-02-09 16:26:08

使用两个画布。到目前为止所有的线都是较低的。正如mika所说，这是当前产品线的最佳产品之一，为当前产品线设置了不透明度。在drawPencilMove中存储该行的位置。在drawPencilUp中，擦除顶部画布并在下部画布上绘制累积位置作为一条线。 – QuentinUK 2013-02-10 16:48:49

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

两个源顶上和目的地之上会工作

来源

2013-07-23 09:47:30 ganmor

使用globalCompositeOperation="xor"并设置一个globalAlpha < 1.

来源

2018-01-03 18:10:08

重叠绘制重叠的半透明线条而没有变暗

回答

相关问题