HTML5-Canvas - derselbe RGBA-Stil erzeugt verschiedene Farben, wenn Alpha <1

Question

Im folgenden Beispiel erzeugt derselbe strokeStyle verschiedene Farben, die je nach Länge der Zeile (?) Variieren.

Dies geschieht nur, wenn alpha < 1.

Was ist der Grund für dieses seltsame Verhalten ist? Gibt es eine bessere Möglichkeit, die Transparenz des Striches einzustellen, damit ich unabhängig von der Länge das gleiche Ergebnis erhalte?

Vielen Dank.

var c = document.getElementById('c1'); 
 
var ctx = c.getContext('2d'); 
 

 
ctx.fillStyle = '#FFFFFF'; 
 
ctx.fillRect(0, 0, 400, 400); 
 

 
ctx.lineWidth = 10; 
 
ctx.strokeStyle = 'rgba(0, 0, 255, 0.3)'; 
 

 
ctx.moveTo(10, 10); 
 
ctx.lineTo(20, 10); 
 
ctx.stroke(); 
 

 
ctx.moveTo(10, 30); 
 
ctx.lineTo(40, 30); 
 
ctx.stroke(); 
 

 
ctx.moveTo(10, 50); 
 
ctx.lineTo(80, 50); 
 
ctx.stroke(); 
 

 
ctx.moveTo(10, 70); 
 
ctx.lineTo(160, 70); 
 
ctx.stroke(); 
 

 
ctx.moveTo(10, 90); 
 
ctx.lineTo(320, 90); 
 
ctx.stroke();

#c1 { 
 
    border: 1px solid black; 
 
}

<canvas width="330" height="100" id="c1"> 
 
</canvas>

Answer 1

var c = document.getElementById('c1'); 
 
var ctx = c.getContext('2d'); 
 

 
ctx.fillStyle = '#FFFFFF'; 
 
ctx.fillRect(0, 0, 400, 400); 
 

 
ctx.lineWidth = 10; 
 
ctx.strokeStyle = 'rgba(0, 0, 255, 0.3)'; 
 

 

 
ctx.moveTo(10, 10); 
 
ctx.lineTo(20, 10); 
 

 

 
ctx.moveTo(10, 30); 
 
ctx.lineTo(40, 30); 
 

 
ctx.moveTo(10, 50); 
 
ctx.lineTo(80, 50); 
 

 

 
ctx.moveTo(10, 70); 
 
ctx.lineTo(160, 70); 
 

 

 
ctx.moveTo(10, 90); 
 
ctx.lineTo(320, 90); 
 
ctx.stroke();

#c1 { 
 
    border: 1px solid black; 
 
}

<canvas width="330" height="100" id="c1"> 
 
</canvas>

Ich weiß nicht, die Ursache für dieses Verhalten, aber die Lösung ist nur Hub am Ende.

Hoffe, das hilft!