canvas中通过globalAlpha实现渐隐效果

canvas 想要实现渐隐效果，首先要理解显示，隐藏效果的原理，
在canvas中怎么实现显示或者隐藏的效果呢？canvas中提供了一个API：
语法：

 ctx.globalAlpha = number  //值在[0,1]之间， 全局透明度

定义和用法
globalAlpha 属性设置或返回绘图的当前透明值（alpha 或 transparency）。
globalAlpha 属性值必须是介于 0.0（完全透明） 与 1.0（不透明） 之间的数字。

需要注意，这个API作用于canvas的全局，只要我们使用，canvas上所有的内容都会变成相同的透明度

如何来控制它的作用区间呢？

我们可以使用save 和restore 来实现,这两个属性通常成对存在，它可以控制在save和restore之间任何的属性都只作用这两个内容之间，对其他的内容没有影响

 ctx.save();
 ctx.globalAlpha = 0.5;     //此时  画出的图片的透明度为0.5
 ctx.drawImage(img,x,y,w,h)；     
 ctx.restore();

通过控制globalAlpha的值在0或者1，就可以轻松实现canvas内容的显示和隐藏，那么渐隐效果怎么实现呢，其实只需给它globalAlpha一个变化的生命值life，而它这个值的获取可以用deltaTime（两帧时间间隔）进行调整，使得它随时间的变化非常的流畅，deltaTime的获取请参考循环调用requestAnimationFrame的使用，我在上一篇文章中有详细的代码[http://www.jianshu.com/p/6101c4dc144c]

var life = 0; //初始状态下为0，完全不显示
var switchy = true; //定义一个开关，可以通过判断条件进行赋值ture或false
function aliveUpdte(){
            if (switchy) {  //显示时
                life += 0.2 * deltaTime * 0.01;
                if (life >= 1) {
                    life = 1;
                }

            }else{  //隐藏时
                life -= 0.2 * deltaTime * 0.01;
                if (life <= 0) {
                    life = 0;
                }
            }
        }
//在gameloop中对aliveUpdte()进行调用,就可以实现渐隐效果啦