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

Posted 2023-03-06

【中文标题】HTML5 画布 - 当 alpha < 1 时，相同的 RGBA 样式会产生不同的颜色

【英文标题】：HTML5 canvas - same RGBA style produces different colours when alpha < 1

【发布时间】：2016-10-27 17:49:57

【问题描述】：

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

只有在 alpha

这种奇怪行为的原因是什么？有没有更好的方法来设置笔画的透明度，这样无论长度如何我都能得到相同的结果？

谢谢。

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   id="c1">
</canvas>

【问题讨论】：

因为你只创建了一条路径，但是绘制了多次。要创建新路径，您需要在定义和绘制它之前调用ctx.beginPath()。在这里，您的 parh 的最终状态也涵盖了所有第一个状态，因此透明度会降低。

【参考方案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   id="c1">
</canvas>

我不知道这种行为的原因，但解决方案是只在最后敲击。

希望这会有所帮助！

【讨论】：

谢谢！您的回答使我对问题有了深入的了解。我需要在开始每一行之前添加ctx.beginPath()（moveTo 之前）。如果我不这样做，显然stroke() 不会丢弃旧路径，因此会再次绘制旧线，因此由于“累积”不透明度，它们的颜色会变暗。

这很聪明。我将来肯定需要知道这一点！谢谢你！