如何正确添加透明度值？

Question

下面的例子绘制了两个盒子。第一个框只是

globalAlpha

为 1 绘制的一个框。第二个框是

globalAlpha

为 0.5 的 2 个框的总和。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "blue";

ctx.globalAlpha = 1.0;

ctx.fillRect(0, 0, 100, 100);

ctx.globalAlpha = 0.5;

ctx.fillRect(100, 0, 100, 100);
ctx.fillRect(100, 0, 100, 100);

<canvas id="canvas"></canvas>

在我看来，两个 alpha 值 0.5 的和并不等于 1，因为盒子的颜色不同。这就是它在我的屏幕上的样子。

如何正确平分 alpha？

Answer 1

这似乎可行，但我不确定是否可以依赖2.2。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.globalAlpha = 1;

ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 100, 100);

const gamma = 2.2;
const count = 100;

ctx.globalAlpha = Math.pow(1/count, 1/gamma);
ctx.fillStyle = "blue";
for (let i = 0; i < count; i++)
  ctx.fillRect(100, 0, 100, 100);

<canvas id="canvas"></canvas>