HTML5 canvas - 当 alpha < 1 时，相同的 RGBA 样式会产生不同的颜色

Question

在下面的示例中，相同的 strokeStyle 会产生不同的颜色，根据线条的长度而变化 (?)。

只有当 alpha < 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>

我不知道这种行为的原因，但解决方案是只在末尾描边。

希望对您有所帮助！

HTML5 canvas - 当 alpha < 1 时，相同的 RGBA 样式会产生不同的颜色

HTML5 canvas - same RGBA style produces different colours when alpha < 1

html

canvas

opacity

alpha

rgba