HTML5キャンバス - alpha <1の場合、同じRGBAスタイルで異なる色が生成されます

Question

下の例では、同じstrokeStyleが線の長さ（？）によって異なる色を生成します。アルファ< 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.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>

私はこの動作の原因を知らないが、解決策は終わりにのみストロークにあります。

希望すると便利です。