请教： HTML5 Canvas画布多背景淡入淡出切换效果的实现

Question

本帖最后由 mycggo 于 2013-01-24 17:01:53 编辑

Answer 1

其他不变 添加这个var mysender = {
        alpha:0
        ,maxAlpha:100
        ,nowindex:0
        ,nextindex:1
        ,imgs:imgs
        ,ctx:ctx
        ,cvs:cvs
        ,u:function(){
            if(++this.alpha>this.maxAlpha){
                this.alpha = 0;
                if(++this.nowindex>=this.imgs.length){this.nowindex = 0}
                if(++this.nextindex>=this.imgs.length){this.nextindex = 0}            }
            return this;
        }
        ,d:function(){
            this.ctx.clearRect(0,0,this.cvs.width,this.cvs.height);            var img = null;            var alpha_2 = (this.alpha/this.maxAlpha);
            var alpha_1 = 1 - alpha_2;
            this.ctx.save();
            this.ctx.globalAlpha = alpha_1;
            img = this.imgs[this.nowindex];
            this.ctx.drawImage(img,0,0,img.width,img.height,0,0,this.cvs.width,this.cvs.height);
            this.ctx.restore();            this.ctx.save();
            this.ctx.globalAlpha = alpha_2;
            img = this.imgs[this.nextindex];
            this.ctx.drawImage(img,0,0,img.width,img.height,0,0,this.cvs.width,this.cvs.height);
            this.ctx.restore();        }
    }
    window.onload=function(){
        setInterval(function(){
            mysender.u().d();
        },1e3/mysender.maxAlpha);
    };

Answer 2

这个封装成对象了，我好好研究研究，KK3K2005，非常感谢！！看了目前你的代码，有3个问题不是很理解。
1： mysender.u().d(); 可以这样调用方法？
2： 1e3/mysender.maxAlpha中的1e3代表什么？
3： u:function(){
if(++this.alpha>this.maxAlpha){
this.alpha = 0;
if(++this.nowindex>=this.imgs.length){this.nowindex = 0}
if(++this.nextindex>=this.imgs.length){this.nextindex = 0}
}
return this;
}这个方法里面：if(++this.alpha>this.maxAlpha)这样的判断方式按照正常写法应该怎么写？

Answer 3

u() 方法  返回了 this  所以 可以  mysender.u().d()
1e3科学计数法  10的3次方 ＝ 1000 
if(++this.alpha>this.maxAlpha)
===>
     this.alpha+=1;
     if(this.alpha>this.maxAlpha)
上面都是基础知识 不会在说第2遍了
在复杂的东西都是基础知识堆出来的