JavaScript Canvas globalAlpha 属性如何工作？

Question

我正在尝试使用 JavaScript 在 Canvas 元素上制作淡出效果。我目前对此有两种解决方案。从理论上讲，两者都应该可以正常工作，但在实践中，只有一个可以，我想知道为什么。

不工作的代码如下：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var i = 1;
requestAnimationFrame(test);

function test(){
 i-=0.01;
 ctx.fillStyle = "white";
 ctx.fillRect(20, 20, 75, 50);
 ctx.globalAlpha = i;
 ctx.fillStyle = "red";
 ctx.fillRect(20, 20, 75, 50);
 requestAnimationFrame(test);
}

我想要实现的是逐渐改变当前上下文的 alpha 值，以便将其淡入白色。一段时间后，它应该具有完全透明度，但事实并非如此。它在到达该状态之前停止。这是 JSFiddle 中的： https: //jsfiddle.net/bq75v1mm/

工作代码如下：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var i = 1;
requestAnimationFrame(test);
function test(){
 i-=0.01;
 ctx.fillStyle = "white";
 ctx.fillRect(20, 20, 75, 50);
 ctx.fillStyle = "rgba("+255+","+0+","+0+","+i+")";
 ctx.fillRect(20, 20, 75, 50);
 requestAnimationFrame(test);
}

使用这段代码，我只是简单地更改即将到来的矩形的给定 fillStyle 的 alpha 值，它就像一个魅力一样，使正方形消失在稀薄的空气中。这是 JSFiddle 中的： https: //jsfiddle.net/mxtynwwd/

我想了解为什么第一个解决方案不起作用？为什么我不能在给定最小值之后降低 globalAlpha 值？或者问题出在代码上？

Answer 1

1. 在第二个示例中，fillStyle每次在绘制白色矩形之前都会重置。您在第一个示例中
   没有做同样的事情。globalAlpha

2. 并非所有数值都会被酒店接受globalAlpha。引用MDN：

   0.0介于（完全透明）和（完全不透明）之间的数字1.0。默认值是1.0超出范围的值，包括在内，Infinity不会NaN被设置，并将globalAlpha保留其先前的值。

   由于浮点指针数学中的精度损失，当i变为负数时，globalAlpha会卡住0.009999999999999247（可能因机器而异）。

要解决上述两个问题，请globalAlpha在绘制白色矩形之前重置：

ctx.globalAlpha = 1;

在绘制红色之前，请i确保>= 0：

i = i < 0 ? 0 : i;

您的第一个示例可以相应地更新为与第二个示例完全相同：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var i = 1;
requestAnimationFrame(test);

function test() {
    i -= 0.01;
    i = i < 0 ? 0 : i;
    ctx.globalAlpha = 1;
    ctx.fillStyle = "white";
    ctx.fillRect(20, 20, 75, 50);
    ctx.globalAlpha = i;
    ctx.fillStyle = "red";
    ctx.fillRect(20, 20, 75, 50);
    requestAnimationFrame(test);
}

[更新小提琴]