画布-渐变速度

Canvas - fade in speed?

本文关键字：速度 渐变 画布      更新时间：2023-09-26

作为一名画布新手，我只是想知道如何管理淡入淡出。到目前为止，我已经想出了一个非常明显的解决方案：

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

虽然它不允许我设置动画速度，而且太快了。有什么建议吗？提前感谢！

您只需要放慢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);
    }
}
相关文章：