搜狗搜索引擎 中秋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();

[代码运行效果截图]