在画布上绘制具有alpha不可行性的正方形的正确方法是什么？

Question

为什么此示例中的方块仍然可见？我做错了什么？

示例：

＆＃13;

＆＃13;

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

ctx.canvas.width = 500;
ctx.canvas.height = 500;

ctx.fillStyle = "rgba(0, 0, 20, 1)";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

ctx.fillStyle = "rgba(255, 255, 255, 1)";
ctx.fillRect(100, 100, 300, 300);

for(let i = 0; i < 10; i++)
{
	ctx.fillStyle = "rgba(0, 0, 20, 0.2)";
	ctx.fillRect(100, 100, 300, 300);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我的理解，经过5次循环后，方块必须消失，但这不会发生在10.如何以正确的方式计算不透明度？

有一个新的例子：

＆＃13;

＆＃13;

var ctx = document.getElementById("ctx").getContext("2d");
var background = "#000236";

ctx.canvas.width = 500;
ctx.canvas.height = 500;

ctx.fillStyle = background;
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

var i = 0;
var inter = setInterval(function()
{

  for (let j = 0; j < 14; j++)
  {
  	ctx.fillStyle = "rgba(255, 255, 255, 1)";
	ctx.fillRect(10 + j * 40, i * 10, 20, 20);
  }
  
  ctx.save();
  ctx.globalAlpha = 0.2;
  ctx.fillStyle = background;
  ctx.fillRect(0, 0, 500, 500);
  ctx.restore();
  
  i++;
	
  if (i >= 50)
  {
    i = 0;
  }
}, 50);

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

正如你在下面看到的，不透明度不是cumulative（我认为这个词是乘法的，但我不是视觉效果的人）。我的意思是，在下面的函数的两次迭代之后，你没有不透明度0.4。这是一个数学过程，它接近它的最大值，但不会达到它。您每次都在使用0.2，但您看到的只是下方颜色的一点点。想想在你的背景上分层彩色玻璃纸，每次它变得有点暗淡，但你不会真的停止看到你的背景。

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

ctx.canvas.width = 500;
ctx.canvas.height = 500;

ctx.fillStyle = "rgba(0, 0, 20, 1)";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

ctx.fillStyle = "rgba(255, 255, 255, 1)";
ctx.fillRect(100, 100, 300, 300);

let count = 30;

function draw() {
    ctx.fillStyle = "rgba(0, 0, 20, 0.2)";
    console.log(ctx.fillStyle);
    ctx.fillRect(100, 100, 300, 300);
    count--;
    if (count) {
        setTimeout(draw, 500);
    }
}

draw();

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

要获得您想要的结果，这可能是一个更好的解决方案：

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

    ctx.canvas.width = 500;
    ctx.canvas.height = 500;

    ctx.fillStyle = "rgba(0, 0, 20, 1)";
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    ctx.fillStyle = "rgba(255, 255, 255, 1)";
    ctx.fillRect(100, 100, 300, 300);

    let count = 0;
    let iterations = 5;

    function draw() {
        ctx.fillStyle = "rgba(0, 0, 20, " + count / iterations + ")";
        console.log(ctx.fillStyle);
        ctx.fillRect(100, 100, 300, 300);
        count++;
        if (count <= iterations) {
            setTimeout(draw, 500);
        }
    }

    draw();

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