canvas 想要實現(xiàn)漸隱效果，首先要理解顯示，隱藏效果的原理，
在canvas中怎么實現(xiàn)顯示或者隱藏的效果呢？canvas中提供了一個API：
語法：

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

定義和用法
globalAlpha 屬性設(shè)置或返回繪圖的當(dāng)前透明值（alpha 或 transparency）。
globalAlpha 屬性值必須是介于 0.0（完全透明） 與 1.0（不透明） 之間的數(shù)字。

需要注意，這個API作用于canvas的全局，只要我們使用，canvas上所有的內(nèi)容都會變成相同的透明度

如何來控制它的作用區(qū)間呢？

我們可以使用save 和restore 來實現(xiàn),這兩個屬性通常成對存在，它可以控制在save和restore之間任何的屬性都只作用這兩個內(nèi)容之間，對其他的內(nèi)容沒有影響

 ctx.save();
 ctx.globalAlpha = 0.5;     //此時  畫出的圖片的透明度為0.5
 ctx.drawImage(img,x,y,w,h)；     
 ctx.restore();

通過控制globalAlpha的值在0或者1，就可以輕松實現(xiàn)canvas內(nèi)容的顯示和隱藏，那么漸隱效果怎么實現(xiàn)呢，其實只需給它globalAlpha一個變化的生命值life，而它這個值的獲取可以用deltaTime（兩幀時間間隔）進行調(diào)整，使得它隨時間的變化非常的流暢，deltaTime的獲取請參考循環(huán)調(diào)用requestAnimationFrame的使用，我在上一篇文章中有詳細的代碼[http://www.itdecent.cn/p/6101c4dc144c]

var life = 0; //初始狀態(tài)下為0，完全不顯示
var switchy = true; //定義一個開關(guān)，可以通過判斷條件進行賦值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()進行調(diào)用,就可以實現(xiàn)漸隱效果啦