Question

作为画布上的新手，我只想弄清楚如何管理淡入/淡出。到目前为止，我已经提出了非常明显的解决方案：

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

帆布 - 速度渐渐消失？

1 个答案: