搜狗搜索引擎中秋LOGO“镜花水月”（canvas特效）

[javascript]代码库
//function sogouWater(){
var WAVE_RESOLUTION = 1, WIDTH_IMG = 400, HEIGHT_IMG = 150, SIZE=WIDTH_IMG*HEIGHT_IMG, FORE_WIDTH = 191, FORE_HEIGHT = 149, FSIZE = FORE_WIDTH*FORE_HEIGHT, TOTAL_IMAGES = 11, LOGO_LEFT = 60;
function waterModel(){
    var width = WIDTH_IMG/WAVE_RESOLUTION,
    height = HEIGHT_IMG/WAVE_RESOLUTION,
    size = width*height, buffer0 = [], buffer1 = [], i, j, tmp, animating = false;
 
    for (i = 0; i < size; i++){
        buffer0.push(0);
        buffer1.push(0);
    }
 
    this.nextStep = function(){
        if (!animating){
            return null;
        }
        for(i=width+1;i<size-width-1;i+=2){
            for(j=1;j<width-1;j++,i++){
                buffer0[i] = (buffer0[i]+buffer0[i+1]+buffer0[i-1]+buffer0[i-width]+buffer0[i+width])/5;
            }
        }
        animating = false;
        for(i=width+1;i<size-width-1;i+=2){
            for(j=1;j<width-1;j++,i++){
                buffer1[i] = ((buffer0[i-1] + buffer0[i+1] + buffer0[i+width] + buffer0[i-width])/2-buffer1[i])*0.9;
                if (!animating && (buffer1[i] > 0.03 || buffer1[i] < -0.03)){
                    animating = true;
                }
            }
        }
        tmp = buffer0;
        buffer0 = buffer1;
        buffer1 = tmp;
        return buffer0;
    }
 
    this.touch = function(x, y, z){
        if(x < 2 || x > width-2 || y < 1 || y > height-2)
        return;
        animating = true;
        var i = x+y*width;
        buffer0[i] += z;
        buffer0[i-1] -= z;
    }
 
    return this;
}
function autoTouch(){
    if(drawCount % 7 == 1){
        var x = Math.round(Math.random()*400), y = Math.round(Math.random()*150);
        wm.touch(x,y,100);
    }
}
 
function drawFrame(){
    if(enAutoTouch){
        autoTouch();
        drawCount++;
    }
    if (texture){
        if (alpha > 0){
            texture = getTexture(curImage, nextImage, alpha);
            alpha -= 20;
        }
        else{
            if (curImage != nextImage){
                if(curImage == 0){
                    fadeIn();
                    pb('pv', 'sharetag');
                }
                if(nextImage == 0){
                    fadeOut();
                }
                alpha = 0;
                curImage = nextImage;
                texture = getTexture(curImage);
                mouseDown = 0;
                movedTime = 0;
            }
        }
 
        var bf = wm.nextStep(), dimage = dctx.getImageData(0, 0, WIDTH_IMG, HEIGHT_IMG), data = dimage.data, reflect_i, i,
        refraction, xPix, yPix;
        if (bf != null){
            for(i=0; i < SIZE; i++){
                strength = bf[i];
                refraction = Math.round(bf[i]*100);
                xPix = (i%WIDTH_IMG) + refraction;
                yPix = parseInt(i/WIDTH_IMG) + refraction;
                if(xPix < 0) xPix = 0;
                if(yPix < 0) yPix = 0;
                if(xPix > WIDTH_IMG-1) xPix = WIDTH_IMG-1;
                if(yPix > HEIGHT_IMG-1) yPix = HEIGHT_IMG-1;
                reflect_i = ((yPix * WIDTH_IMG) + xPix);
 
                strength *= 0.1;
                strength += 1.0;
 
 
                data[i*4] = texture.data[reflect_i*4];
                data[i*4+1] = texture.data[reflect_i*4+1];
                data[i*4+2] = texture.data[reflect_i*4+2]
                data[i*4+3] = texture.data[reflect_i*4+3];
            }
            dctx.putImageData(dimage, 0,0);
        }
        else{
            dctx.putImageData(texture, 0,0);
            enAutoTouch = true;
        }
    }
    setTimeout(drawFrame, 50);
}
 
function makeForeGroundAlpha(data, imgid, imgid2, alpha){
    fctx.clearRect(0, 0, FORE_WIDTH, FORE_HEIGHT);
    fctx.drawImage(foreground, (imgid%2)*FORE_WIDTH , parseInt(imgid/2)*FORE_HEIGHT, FORE_WIDTH, FORE_HEIGHT, 0, 0, FORE_WIDTH, FORE_HEIGHT);
    fctx2.clearRect(0, 0, FORE_WIDTH, FORE_HEIGHT);
    fctx2.drawImage(foreground, (imgid2%2)*FORE_WIDTH , parseInt(imgid2/2)*FORE_HEIGHT, FORE_WIDTH, FORE_HEIGHT, 0, 0, FORE_WIDTH, FORE_HEIGHT);
    var fdata = fctx.getImageData(0, 0, FORE_WIDTH, FORE_HEIGHT), fdata2 = fctx2.getImageData(0, 0, FORE_WIDTH, FORE_HEIGHT), i, j, idx;
    for (i = 0; i < FSIZE; i++){
        idx = parseInt(i/FORE_WIDTH)*WIDTH_IMG+i%FORE_WIDTH+LOGO_LEFT;
        if (fdata.data[i*4] > 0 && fdata2.data[i*4] > 0){
            fdata.data[i*4] = parseInt((fdata2.data[i*4]*(255-alpha)+fdata.data[i*4]*alpha)/255);
            fdata.data[i*4+1] = parseInt((fdata2.data[i*4+1]*(255-alpha)+fdata.data[i*4+1]*alpha)/255);
            fdata.data[i*4+2] = parseInt((fdata2.data[i*4+2]*(255-alpha)+fdata.data[i*4+2]*alpha)/255);
        }
        else if (fdata.data[i*4] > 0){
            fdata.data[i*4] = parseInt((data[idx*4]*(255-alpha)+fdata.data[i*4]*alpha)/255);
            fdata.data[i*4+1] = parseInt((data[idx*4+1]*(255-alpha)+fdata.data[i*4+1]*alpha)/255);
            fdata.data[i*4+2] = parseInt((data[idx*4+2]*(255-alpha)+fdata.data[i*4+2]*alpha)/255);
        }
        else if (fdata2.data[i*4] > 0){
            fdata.data[i*4] = parseInt((data[idx*4]*(alpha)+fdata2.data[i*4]*(255-alpha))/255);
            fdata.data[i*4+1] = parseInt((data[idx*4+1]*(alpha)+fdata2.data[i*4+1]*(255-alpha))/255);
            fdata.data[i*4+2] = parseInt((data[idx*4+2]*(alpha)+fdata2.data[i*4+2]*(255-alpha))/255);
        }
        else{
            fdata.data[i*4] = data[idx*4];
            fdata.data[i*4+1] = data[idx*4+1];
            fdata.data[i*4+2] = data[idx*4+2];
        }
        fdata.data[i*4+3] = 255;
    }
    ctx.putImageData(fdata, LOGO_LEFT,0);
}
 
function getTexture(imgid, nimgid, alpha) {
    ctx.clearRect(0, 0, WIDTH_IMG, HEIGHT_IMG);
    ctx.drawImage(background, 0 ,0, WIDTH_IMG, HEIGHT_IMG);
    if (alpha && nimgid >= 0){
        makeForeGroundAlpha(ctx.getImageData(0, 0, WIDTH_IMG, HEIGHT_IMG).data, imgid, nimgid, alpha)
    }
    else{
        ctx.drawImage(foreground, (imgid%2)*FORE_WIDTH , parseInt(imgid/2)*FORE_HEIGHT, FORE_WIDTH, FORE_HEIGHT, LOGO_LEFT, 0, FORE_WIDTH, FORE_HEIGHT);
    }
    return ctx.getImageData(0, 0, WIDTH_IMG, HEIGHT_IMG);
}
 
function changeTexture(tt){
    if (curImage != nextImage){
        return;
    }
    if(tt==1){
     
        pb('pv', 'clickpic');
    }
    if(tt==2){
        pb('pv','slidepic');
    }
    var i;
    if (imageshowed == TOTAL_IMAGES){
        imageshowed = 0;
        imageGroup = [];
        for (i = 0; i < TOTAL_IMAGES; i++){
            imageGroup.push(0);
        }
        nextImage = 0;
    }
    else{
        if (imageshowed < 4){
            i = parseInt(Math.random()*4);
            while (imageGroup[i]){
                i = (i+1)%4;
            }
 
        }
        else{
            i = parseInt(Math.random()*(TOTAL_IMAGES-4))+4;
            while (imageGroup[i]){
                i = (i+1)%(TOTAL_IMAGES-4)+4;
            }
        }
        imageGroup[i] = 1;
        nextImage = i+1;
        imageshowed++;
    }
    if (curImage != nextImage){
    // console.log([tt, curImage, nextImage, imageshowed,
    // -999].concat(imageGroup));
        alpha = 255;
    }
}
 
function imageLoaded(){
    loaded++;
    if (loaded < 2){
        return;
    }
 
    texture = getTexture(0);
 
    var timer, timer1;
    dcanvas.addEventListener("mousedown", function(e){
        enAutoTouch = false;
        mouseDown++;
        clearTimeout(timer1);
        if (mouseDown > 1){
            changeTexture(1);
        }
        else{
            timer1 = setTimeout(changeTexture(1), 1500);
        }
        var x = (e.clientX - logo.offsetLeft) + document.body.scrollLeft + document.documentElement.scrollLeft;
        var y = (e.clientY - logo.offsetTop) + document.body.scrollTop + document.documentElement.scrollTop;
        wm.touch(x, y, 100);
    }, false);
 
 
    dcanvas.addEventListener("mousemove", function(e){
        enAutoTouch = false;
        clearTimeout(timer);
        timer = setTimeout(function(){
            movedTime = 0;
        }, 500);
        if (movedTime){
            if ((new Date().getTime()) - movedTime > 1000){
                changeTexture(2);
            }
        }
        else{
            movedTime = new Date().getTime();
        }
        var x = (e.clientX - logo.offsetLeft) + document.body.scrollLeft + document.documentElement.scrollLeft;
        var y = (e.clientY - logo.offsetTop) + document.body.scrollTop + document.documentElement.scrollTop;
        wm.touch(x, y, 100);
    }, false);
     
    dcanvas.addEventListener("mouseover", function(e){
        if(mouseoverCount == 0){
            pb('pv', 'water');
            mouseoverCount++;
        }
    });
    dcanvas.addEventListener("mouseout", function(e){
        if(mouseoverCount > 0){
            pb('pv', 'water');
        }
    });
}
 
    function setOpacity(ev, v){
        ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;
    }
    
    function fadeIn(speed, opacity){
        var elem = document.getElementById('sogou_share');
        speed = speed || 20;
        opacity = opacity || 100;
        elem.style.display = 'block';
        setOpacity(elem, 0);
        var val = 0;
        (function(){
            setOpacity(elem, val);
            val += 5;
            if (val <= opacity) {
                setTimeout(arguments.callee, speed)
            }
        })();
    }
    function fadeOut(speed, opacity){
        var elem = document.getElementById('sogou_share');
        speed = speed || 20;
        opacity = opacity || 0;
        var val = 100;
        (function(){
            setOpacity(elem, val);
            val -= 5;
            if (val >= opacity) {
                setTimeout(arguments.callee, speed);
            }else if (val < 0) {
                elem.style.display = 'none';
            }
        })();
    }
 
var $ = function(ele){
    return document.getElementById(ele);
}
 
var bind =function(elem, evt, func){
    if (elem){
        return elem.addEventListener?elem.addEventListener(evt,func,false):elem.attachEvent("on"+evt,func);
    }
}
 
$('sogou_share_sina').onclick = shareresult;
$('sogou_share_qq').onclick = shareresult;
$('sogou_share_sohu').onclick = shareresult;
 
var contentAll = ['','我在搜狗搜索首页玩#镜花水月#，拨动水面，月亮倒影变成了“广寒宫”，关于月宫传说都是真的吗？… @搜狗搜索，来测测你在中秋节的内心想法吧： ', '我在搜狗搜索首页玩#镜花水月#，拨动水面，月亮倒影变成了“灯笼”，我是个怀旧的人… @搜狗搜索，来测测你在中秋节的内心想法吧：', '我在搜狗搜索首页玩#镜花水月#，拨动水面，月亮倒影变成了“一只玉兔”，看来我是个充满幻想的人… @搜狗搜索，来测测你在中秋节的内心想法吧：', '我在搜狗搜索首页玩#镜花水月#，拨动水面，“家书一封”，杜甫曾说“露从今夜白，月是故乡明”，我真的想家了… @搜狗搜索，来测测你在中秋节的内心想法吧：', '我在搜狗搜索首页玩#镜花水月#，拨动水面，月亮倒影变成了“莲蓉蛋黄月饼”，请吃货们慢慢转发吧… @搜狗搜索，来测测你在中秋节的内心想法吧：', '我在搜狗搜索首页玩#镜花水月#，拨动水面，月亮倒影变成了“菊花”，啊！… @搜狗搜索，来测测你在中秋节的内心想法吧：', '我在搜狗搜索首页玩#镜花水月#，拨动水面，月亮倒影变成了“大闸蟹”，请顶级吃货们默默转发吧… @搜狗搜索，来测测你在中秋节的内心想法吧：',  '我在搜狗搜索首页玩#镜花水月#，拨动水面，月亮倒影变成了“情侣合影”，亲爱的，中秋快乐… @搜狗搜索，来测测你在中秋节的内心想法吧：',  '我在搜狗搜索首页玩#镜花水月#，拨动水面，月亮倒影变成了“李白”，囧… @搜狗搜索，来测测你在中秋节的内心想法吧：', '我在搜狗搜索首页玩#镜花水月#，拨动水面，月亮倒影变成了“吴刚”，囧… @搜狗搜索，来测测你在中秋节的内心想法吧：', '我在搜狗搜索首页玩#镜花水月#，拨动水面，月亮倒影变成了“嫦娥”，囧… @搜狗搜索，来测测你在中秋节的内心想法吧：'];
 
var imageAll = ['','yuegong', 'gongdeng', 'yutu', 'mail', 'yuebing', 'juhua', 'xie', 'zhaopian', 'libai', 'wugang', 'change'];
var  imagelink1 = "http://help.sogou.com/logo/midfall/images/", imagelink2 = ".jpg", url = 'http://www.sogou.com/';
// var fixText1 = "我在搜狗搜索首页玩#镜花水月#，月亮的倒影因我干扰而发生变化，变成了", fixText2 = "
// @搜狗搜索。来测测你在中秋节的内心想法吧。";
 
function shareresult(){
     
    if(this.parentNode.filters){
        if(this.parentNode.filters.alpha.opacity!= 100){
            return;
        }
    } 
    else if(this.parentNode.style.opacity != 1){
        return;
    }
    var tname = this.id;
    var content = contentAll[curImage];
    var imagelink = [imagelink1, imageAll[curImage], imagelink2].join('');
    if(tname.indexOf('sina')>0){pb("cl", "share_sina");twshare('http://service.weibo.com/share/share.php?url=',url,content,imagelink,615,505);return false;}
    if(tname.indexOf('qq')>0){pb("cl", "share_qq");twshare('http://v.t.qq.com/share/share.php?url=',url,content.replace('@搜狗搜索', '@sogouweb'),imagelink,615,505);return false;}
    if(tname.indexOf('sohu')>0){pb("cl", "share_sohu");
        (function(s,d,e,r,l,p,t,z,c){
            var f='http://t.sohu.com/third/post.jsp?',u=z||"",p=['&url=',e(u),'&title=',e(t||d.title),'&content=',c||'gb2312','&pic=',e(p||'')].join('');
            function a(){
            if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=660,height=470,left=',(s.width-660)/2,',top=',(s.height-470)/2].join('')))u.href=[f,p].join('');};
            if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);
            else a();
        })(screen,document,encodeURIComponent,'','',imagelink,content.replace(/\[.*?\]/g,""),url,'utf-8');
        return false;
    }   
}
 
function twshare(surl, url, title, img, w, h){  
    var _t = encodeURIComponent(title);
        var _url = encodeURIComponent(url);
        var _pic = encodeURIComponent(img);
        var _u = surl+_url+'&pic='+_pic+'&title='+_t;
        window.open( _u,'', 'width='+w+', height='+h+', top=0, left=0, toolbar=no, menubar=no, scrollbars=no, location=yes, resizable=no, status=no' );
    }
function pb(type, act, param){
    try{
        var imgurl = ["http://pb.sogou.com/"+type+".gif?uigs_productid=webapp&type=moon&uigs_t="];
        imgurl.push((new Date()).getTime());
        if(type == 'pv'){
            imgurl.push('&act=',act);
        }else{
            imgurl.push('&uigs_cl=', act);
        }
        imgurl.push("&uniqueid=", uniqueid);
        if(act != 'water'){
            imgurl.push('&pictype=', curImage);
        }
        if (param) {
            for (var i in param) {
                imgurl.push("&", i, "=", param[i]);
            }
        }
        (new Image()).src = imgurl.join("");
    }catch(e){
    }
}
 
var drawCount = 0, enAutoTouch = true, mouseoverCount = 0;
 
var canvas = document.createElement('canvas'),
fcanvas = document.createElement('canvas'),
fcanvas2 = document.createElement('canvas'),
dcanvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
fctx = fcanvas.getContext('2d'),
fctx2 = fcanvas2.getContext('2d'),
dctx = dcanvas.getContext('2d'),
background = document.createElement('img'),
foreground = document.createElement('img'),
loaded = 0, texture=null,
wm = new waterModel(),
mouseDown = 0,
logo = document.getElementById("logo"),
imageshowed = 0,
curImage = 0,
nextImage = 0,
imageGroup = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
movedTime = 0,
alpha = 0;
 
logo.appendChild(dcanvas);
canvas.setAttribute('width', WIDTH_IMG);
canvas.setAttribute('height', HEIGHT_IMG);
fcanvas.setAttribute('width', FORE_WIDTH);
fcanvas.setAttribute('height', FORE_HEIGHT);
fcanvas2.setAttribute('width', FORE_WIDTH);
fcanvas2.setAttribute('height', FORE_HEIGHT);
dcanvas.setAttribute('width', WIDTH_IMG);
dcanvas.setAttribute('height', HEIGHT_IMG);
 
background.onload = imageLoaded;
foreground.onload = imageLoaded;
background.src = "/logo/midfall/images/sogoulogo.jpg";
foreground.src = "/logo/midfall/images/icon.png";
drawFrame();
// }
 
// sogouWater();
[代码运行效果截图]
用户注册

用户登录

发表随想

该用户最新代码

编程随想

[javascript]代码库

[代码运行效果截图]

网友评论 (发表评论)

发表评论：

评论须知：

扫码下载

输入口令后可复制整站源码

用户注册

用户登录

发表随想

该用户最新代码

编程随想

搜狗搜索引擎 中秋LOGO“镜花水月”（canvas特效）

[javascript]代码库

[代码运行效果截图]

网友评论 (发表评论)

发表评论：

评论须知：

扫码下载

输入口令后可复制整站源码

搜狗搜索引擎中秋LOGO“镜花水月”（canvas特效）
