JavaScript Canvas globalAlpha属性如何工作？

我想在Canvas元素上使用JavaScript进行淡出效果。我目前有两个解决方案。理论上，两者都应该正常工作，但在实践中，只有一个可以，我想知道为什么。JavaScript Canvas globalAlpha属性如何工作？

的不工作的代码如下：

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); 
}

有了这个代码，我只是简单地改变给定的填充样式的Alpha值为即将到来的矩形，它像魅力一样工作，并使广场消失在空气中。在这里它是在JSFiddle：https://jsfiddle.net/mxtynwwd/

我想了解为什么不首次溶出工作？为什么我不能在给定的最小值后降低globalAlpha值？或者是代码中的问题？

来源

2016-03-01 Letokteren

在第二个示例中，在绘制白色矩形之前，每次都重置fillStyle。
您在第一个示例中与globalAlpha不一样。
并不是所有的值都会被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); 
}

[Updated fiddle]

来源

2016-03-01 16:34:05 Siguza

JavaScript Canvas globalAlpha属性如何工作？

回答

相关问题