javascript - Canvas - 淡出速度？

Question

作为 Canvas 新手，我只是想弄清楚如何管理淡入/淡出。 到目前为止，我已经想出了相当明显的解决方案:

var alpha = 0.01;
        c.globalAlpha = alpha;
        c.font="44px Georgia";
        c.fillStyle = '#fff';
        c.fillText("Ave Satani!!",120,250);
        if(alpha < 1.0)
        {

        alpha += 0.01;  
        requestAnimationFrame(draw);    
            }

虽然它不允许我设置动画速度，而且它太快了。 有小费吗？提前致谢!

Answer 1

你只需要减慢 alpha 值的增量即可。所以你可以使用另一个变量来减慢速度

http://jsfiddle.net/dlinx/968y1e3z/ 这就是您想要的，速度值越小，过渡越快，值越高，动画越慢。

var c = document.getElementById("can").getContext("2d");
var alpha = 0.01;
var i=0,speed=10;
c.globalAlpha = 0;

draw();
function draw() {
    c.globalAlpha = alpha;
    c.font = "44px Georgia";
    c.fillStyle = '#000';
    c.fillText("Ave Satani!!", 120, 250);
    i+=1;
    if (alpha < 1.0 ) {
        if(i%speed===0)
        alpha += 0.001;
        requestAnimationFrame(draw);
    }
}