Code666 (代码贴、代码片段)

[JavaScript] 搜狗搜索引擎 中秋LOGO“镜花水月”（canvas特效） →→→→→进入此内容的聊天室

来自 , 2019-07-07, 写在 JavaScript, 查看 101 次.
URL http://www.code666.cn/view/473447ac
  1. //function sogouWater(){
  2. 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;
  3. function waterModel(){
  4.         var width = WIDTH_IMG/WAVE_RESOLUTION,
  5.         height = HEIGHT_IMG/WAVE_RESOLUTION,
  6.         size = width*height, buffer0 = [], buffer1 = [], i, j, tmp, animating = false;
  7.  
  8.         for (i = 0; i < size; i++){
  9.                 buffer0.push(0);
  10.                 buffer1.push(0);
  11.         }
  12.  
  13.         this.nextStep = function(){
  14.                 if (!animating){
  15.                         return null;
  16.                 }
  17.                 for(i=width+1;i<size-width-1;i+=2){
  18.                         for(j=1;j<width-1;j++,i++){
  19.                                 buffer0[i] = (buffer0[i]+buffer0[i+1]+buffer0[i-1]+buffer0[i-width]+buffer0[i+width])/5;
  20.                         }
  21.                 }
  22.                 animating = false;
  23.                 for(i=width+1;i<size-width-1;i+=2){
  24.                         for(j=1;j<width-1;j++,i++){
  25.                                 buffer1[i] = ((buffer0[i-1] + buffer0[i+1] + buffer0[i+width] + buffer0[i-width])/2-buffer1[i])*0.9;
  26.                                 if (!animating && (buffer1[i] > 0.03 || buffer1[i] < -0.03)){
  27.                                         animating = true;
  28.                                 }
  29.                         }
  30.                 }
  31.                 tmp = buffer0;
  32.                 buffer0 = buffer1;
  33.                 buffer1 = tmp;
  34.                 return buffer0;
  35.         }
  36.  
  37.         this.touch = function(x, y, z){
  38.                 if(x < 2 || x > width-2 || y < 1 || y > height-2)
  39.                 return;
  40.                 animating = true;
  41.                 var i = x+y*width;
  42.                 buffer0[i] += z;
  43.                 buffer0[i-1] -= z;
  44.         }
  45.  
  46.         return this;
  47. }
  48. function autoTouch(){
  49.         if(drawCount % 7 == 1){
  50.                 var x = Math.round(Math.random()*400), y = Math.round(Math.random()*150);
  51.                 wm.touch(x,y,100);
  52.         }
  53. }
  54.  
  55. function drawFrame(){
  56.         if(enAutoTouch){
  57.                 autoTouch();
  58.                 drawCount++;
  59.         }
  60.         if (texture){
  61.                 if (alpha > 0){
  62.                         texture = getTexture(curImage, nextImage, alpha);
  63.                         alpha -= 20;
  64.                 }
  65.                 else{
  66.                         if (curImage != nextImage){
  67.                                 if(curImage == 0){
  68.                                         fadeIn();
  69.                                         pb('pv', 'sharetag');
  70.                                 }
  71.                                 if(nextImage == 0){
  72.                                         fadeOut();
  73.                                 }
  74.                                 alpha = 0;
  75.                                 curImage = nextImage;
  76.                                 texture = getTexture(curImage);
  77.                                 mouseDown = 0;
  78.                                 movedTime = 0;
  79.                         }
  80.                 }
  81.  
  82.                 var bf = wm.nextStep(), dimage = dctx.getImageData(0, 0, WIDTH_IMG, HEIGHT_IMG), data = dimage.data, reflect_i, i,
  83.                 refraction, xPix, yPix;
  84.                 if (bf != null){
  85.                         for(i=0; i < SIZE; i++){
  86.                                 strength = bf[i];
  87.                                 refraction = Math.round(bf[i]*100);
  88.                                 xPix = (i%WIDTH_IMG) + refraction;
  89.                                 yPix = parseInt(i/WIDTH_IMG) + refraction;
  90.                                 if(xPix < 0) xPix = 0;
  91.                                 if(yPix < 0) yPix = 0;
  92.                                 if(xPix > WIDTH_IMG-1) xPix = WIDTH_IMG-1;
  93.                                 if(yPix > HEIGHT_IMG-1) yPix = HEIGHT_IMG-1;
  94.                                 reflect_i = ((yPix * WIDTH_IMG) + xPix);
  95.  
  96.                                 strength *= 0.1;
  97.                                 strength += 1.0;
  98.  
  99.  
  100.                                 data[i*4] = texture.data[reflect_i*4];
  101.                                 data[i*4+1] = texture.data[reflect_i*4+1];
  102.                                 data[i*4+2] = texture.data[reflect_i*4+2]
  103.                                 data[i*4+3] = texture.data[reflect_i*4+3];
  104.                         }
  105.                         dctx.putImageData(dimage, 0,0);
  106.                 }
  107.                 else{
  108.                         dctx.putImageData(texture, 0,0);
  109.                         enAutoTouch = true;
  110.                 }
  111.         }
  112.         setTimeout(drawFrame, 50);
  113. }
  114.  
  115. function makeForeGroundAlpha(data, imgid, imgid2, alpha){
  116.         fctx.clearRect(0, 0, FORE_WIDTH, FORE_HEIGHT);
  117.         fctx.drawImage(foreground, (imgid%2)*FORE_WIDTH , parseInt(imgid/2)*FORE_HEIGHT, FORE_WIDTH, FORE_HEIGHT, 0, 0, FORE_WIDTH, FORE_HEIGHT);
  118.         fctx2.clearRect(0, 0, FORE_WIDTH, FORE_HEIGHT);
  119.         fctx2.drawImage(foreground, (imgid2%2)*FORE_WIDTH , parseInt(imgid2/2)*FORE_HEIGHT, FORE_WIDTH, FORE_HEIGHT, 0, 0, FORE_WIDTH, FORE_HEIGHT);
  120.         var fdata = fctx.getImageData(0, 0, FORE_WIDTH, FORE_HEIGHT), fdata2 = fctx2.getImageData(0, 0, FORE_WIDTH, FORE_HEIGHT), i, j, idx;
  121.         for (i = 0; i < FSIZE; i++){
  122.                 idx = parseInt(i/FORE_WIDTH)*WIDTH_IMG+i%FORE_WIDTH+LOGO_LEFT;
  123.                 if (fdata.data[i*4] > 0 && fdata2.data[i*4] > 0){
  124.                         fdata.data[i*4] = parseInt((fdata2.data[i*4]*(255-alpha)+fdata.data[i*4]*alpha)/255);
  125.                         fdata.data[i*4+1] = parseInt((fdata2.data[i*4+1]*(255-alpha)+fdata.data[i*4+1]*alpha)/255);
  126.                         fdata.data[i*4+2] = parseInt((fdata2.data[i*4+2]*(255-alpha)+fdata.data[i*4+2]*alpha)/255);
  127.                 }
  128.                 else if (fdata.data[i*4] > 0){
  129.                         fdata.data[i*4] = parseInt((data[idx*4]*(255-alpha)+fdata.data[i*4]*alpha)/255);
  130.                         fdata.data[i*4+1] = parseInt((data[idx*4+1]*(255-alpha)+fdata.data[i*4+1]*alpha)/255);
  131.                         fdata.data[i*4+2] = parseInt((data[idx*4+2]*(255-alpha)+fdata.data[i*4+2]*alpha)/255);
  132.                 }
  133.                 else if (fdata2.data[i*4] > 0){
  134.                         fdata.data[i*4] = parseInt((data[idx*4]*(alpha)+fdata2.data[i*4]*(255-alpha))/255);
  135.                         fdata.data[i*4+1] = parseInt((data[idx*4+1]*(alpha)+fdata2.data[i*4+1]*(255-alpha))/255);
  136.                         fdata.data[i*4+2] = parseInt((data[idx*4+2]*(alpha)+fdata2.data[i*4+2]*(255-alpha))/255);
  137.                 }
  138.                 else{
  139.                         fdata.data[i*4] = data[idx*4];
  140.                         fdata.data[i*4+1] = data[idx*4+1];
  141.                         fdata.data[i*4+2] = data[idx*4+2];
  142.                 }
  143.                 fdata.data[i*4+3] = 255;
  144.         }
  145.         ctx.putImageData(fdata, LOGO_LEFT,0);
  146. }
  147.  
  148. function getTexture(imgid, nimgid, alpha) {
  149.         ctx.clearRect(0, 0, WIDTH_IMG, HEIGHT_IMG);
  150.         ctx.drawImage(background, 0 ,0, WIDTH_IMG, HEIGHT_IMG);
  151.         if (alpha && nimgid >= 0){
  152.                 makeForeGroundAlpha(ctx.getImageData(0, 0, WIDTH_IMG, HEIGHT_IMG).data, imgid, nimgid, alpha)
  153.         }
  154.         else{
  155.                 ctx.drawImage(foreground, (imgid%2)*FORE_WIDTH , parseInt(imgid/2)*FORE_HEIGHT, FORE_WIDTH, FORE_HEIGHT, LOGO_LEFT, 0, FORE_WIDTH, FORE_HEIGHT);
  156.         }
  157.         return ctx.getImageData(0, 0, WIDTH_IMG, HEIGHT_IMG);
  158. }
  159.  
  160. function changeTexture(tt){
  161.         if (curImage != nextImage){
  162.                 return;
  163.         }
  164.         if(tt==1){
  165.        
  166.                 pb('pv', 'clickpic');
  167.         }
  168.         if(tt==2){
  169.                 pb('pv','slidepic');
  170.         }
  171.         var i;
  172.         if (imageshowed == TOTAL_IMAGES){
  173.                 imageshowed = 0;
  174.                 imageGroup = [];
  175.                 for (i = 0; i < TOTAL_IMAGES; i++){
  176.                         imageGroup.push(0);
  177.                 }
  178.                 nextImage = 0;
  179.         }
  180.         else{
  181.                 if (imageshowed < 4){
  182.                         i = parseInt(Math.random()*4);
  183.                         while (imageGroup[i]){
  184.                                 i = (i+1)%4;
  185.                         }
  186.  
  187.                 }
  188.                 else{
  189.                         i = parseInt(Math.random()*(TOTAL_IMAGES-4))+4;
  190.                         while (imageGroup[i]){
  191.                                 i = (i+1)%(TOTAL_IMAGES-4)+4;
  192.                         }
  193.                 }
  194.                 imageGroup[i] = 1;
  195.                 nextImage = i+1;
  196.                 imageshowed++;
  197.         }
  198.         if (curImage != nextImage){
  199.         // console.log([tt, curImage, nextImage, imageshowed,
  200.         // -999].concat(imageGroup));
  201.                 alpha = 255;
  202.         }
  203. }
  204.  
  205. function imageLoaded(){
  206.         loaded++;
  207.         if (loaded < 2){
  208.                 return;
  209.         }
  210.  
  211.         texture = getTexture(0);
  212.  
  213.         var timer, timer1;
  214.         dcanvas.addEventListener("mousedown", function(e){
  215.                 enAutoTouch = false;
  216.                 mouseDown++;
  217.                 clearTimeout(timer1);
  218.                 if (mouseDown > 1){
  219.                         changeTexture(1);
  220.                 }
  221.                 else{
  222.                         timer1 = setTimeout(changeTexture(1), 1500);
  223.                 }
  224.                 var x = (e.clientX - logo.offsetLeft) + document.body.scrollLeft + document.documentElement.scrollLeft;
  225.                 var y = (e.clientY - logo.offsetTop) + document.body.scrollTop + document.documentElement.scrollTop;
  226.                 wm.touch(x, y, 100);
  227.         }, false);
  228.  
  229.  
  230.         dcanvas.addEventListener("mousemove", function(e){
  231.                 enAutoTouch = false;
  232.                 clearTimeout(timer);
  233.                 timer = setTimeout(function(){
  234.                         movedTime = 0;
  235.                 }, 500);
  236.                 if (movedTime){
  237.                         if ((new Date().getTime()) - movedTime > 1000){
  238.                                 changeTexture(2);
  239.                         }
  240.                 }
  241.                 else{
  242.                         movedTime = new Date().getTime();
  243.                 }
  244.                 var x = (e.clientX - logo.offsetLeft) + document.body.scrollLeft + document.documentElement.scrollLeft;
  245.                 var y = (e.clientY - logo.offsetTop) + document.body.scrollTop + document.documentElement.scrollTop;
  246.                 wm.touch(x, y, 100);
  247.         }, false);
  248.        
  249.         dcanvas.addEventListener("mouseover", function(e){
  250.                 if(mouseoverCount == 0){
  251.                         pb('pv', 'water');
  252.                         mouseoverCount++;
  253.                 }
  254.         });
  255.         dcanvas.addEventListener("mouseout", function(e){
  256.                 if(mouseoverCount > 0){
  257.                         pb('pv', 'water');
  258.                 }
  259.         });
  260. }
  261.  
  262.         function setOpacity(ev, v){
  263.         ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;
  264.     }
  265.    
  266.         function fadeIn(speed, opacity){
  267.             var elem = document.getElementById('sogou_share');
  268.             speed = speed || 20;
  269.             opacity = opacity || 100;
  270.             elem.style.display = 'block';
  271.             setOpacity(elem, 0);
  272.             var val = 0;
  273.             (function(){
  274.                 setOpacity(elem, val);
  275.                 val += 5;
  276.                 if (val <= opacity) {
  277.                     setTimeout(arguments.callee, speed)
  278.                 }
  279.             })();
  280.         }
  281.         function fadeOut(speed, opacity){
  282.             var elem = document.getElementById('sogou_share');
  283.             speed = speed || 20;
  284.             opacity = opacity || 0;
  285.             var val = 100;
  286.             (function(){
  287.                 setOpacity(elem, val);
  288.                 val -= 5;
  289.                 if (val >= opacity) {
  290.                     setTimeout(arguments.callee, speed);
  291.                 }else if (val < 0) {
  292.                     elem.style.display = 'none';
  293.                 }
  294.             })();
  295.         }
  296.  
  297. var $ = function(ele){
  298.         return document.getElementById(ele);
  299. }
  300.  
  301. var bind =function(elem, evt, func){
  302.         if (elem){
  303.                 return elem.addEventListener?elem.addEventListener(evt,func,false):elem.attachEvent("on"+evt,func);
  304.         }
  305. }
  306.  
  307. $('sogou_share_sina').onclick = shareresult;
  308. $('sogou_share_qq').onclick = shareresult;
  309. $('sogou_share_sohu').onclick = shareresult;
  310.  
  311. var contentAll = ['','我在搜狗搜索首页玩#镜花水月#，拨动水面，月亮倒影变成了“广寒宫”，关于月宫传说都是真的吗？… @搜狗搜索，来测测你在中秋节的内心想法吧： ', '我在搜狗搜索首页玩#镜花水月#，拨动水面，月亮倒影变成了“灯笼”，我是个怀旧的人… @搜狗搜索，来测测你在中秋节的内心想法吧：', '我在搜狗搜索首页玩#镜花水月#，拨动水面，月亮倒影变成了“一只玉兔”，看来我是个充满幻想的人… @搜狗搜索，来测测你在中秋节的内心想法吧：', '我在搜狗搜索首页玩#镜花水月#，拨动水面，“家书一封”，杜甫曾说“露从今夜白，月是故乡明”，我真的想家了… @搜狗搜索，来测测你在中秋节的内心想法吧：', '我在搜狗搜索首页玩#镜花水月#，拨动水面，月亮倒影变成了“莲蓉蛋黄月饼”，请吃货们慢慢转发吧… @搜狗搜索，来测测你在中秋节的内心想法吧：', '我在搜狗搜索首页玩#镜花水月#，拨动水面，月亮倒影变成了“菊花”，啊！… @搜狗搜索，来测测你在中秋节的内心想法吧：', '我在搜狗搜索首页玩#镜花水月#，拨动水面，月亮倒影变成了“大闸蟹”，请顶级吃货们默默转发吧… @搜狗搜索，来测测你在中秋节的内心想法吧：',  '我在搜狗搜索首页玩#镜花水月#，拨动水面，月亮倒影变成了“情侣合影”，亲爱的，中秋快乐… @搜狗搜索，来测测你在中秋节的内心想法吧：',  '我在搜狗搜索首页玩#镜花水月#，拨动水面，月亮倒影变成了“李白”，囧… @搜狗搜索，来测测你在中秋节的内心想法吧：', '我在搜狗搜索首页玩#镜花水月#，拨动水面，月亮倒影变成了“吴刚”，囧… @搜狗搜索，来测测你在中秋节的内心想法吧：', '我在搜狗搜索首页玩#镜花水月#，拨动水面，月亮倒影变成了“嫦娥”，囧… @搜狗搜索，来测测你在中秋节的内心想法吧：'];
  312.  
  313. var imageAll = ['','yuegong', 'gongdeng', 'yutu', 'mail', 'yuebing', 'juhua', 'xie', 'zhaopian', 'libai', 'wugang', 'change'];
  314. var  imagelink1 = "http://help.sogou.com/logo/midfall/images/", imagelink2 = ".jpg", url = 'http://www.sogou.com/';
  315. // var fixText1 = "我在搜狗搜索首页玩#镜花水月#，月亮的倒影因我干扰而发生变化，变成了", fixText2 = "
  316. // @搜狗搜索。来测测你在中秋节的内心想法吧。";
  317.  
  318. function shareresult(){
  319.        
  320.         if(this.parentNode.filters){
  321.                 if(this.parentNode.filters.alpha.opacity!= 100){
  322.                         return;
  323.                 }
  324.         }
  325.         else if(this.parentNode.style.opacity != 1){
  326.                 return;
  327.         }
  328.         var tname = this.id;
  329.         var content = contentAll[curImage];
  330.         var imagelink = [imagelink1, imageAll[curImage], imagelink2].join('');
  331.         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;}
  332.         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;}
  333.         if(tname.indexOf('sohu')>0){pb("cl", "share_sohu");
  334.                 (function(s,d,e,r,l,p,t,z,c){
  335.                         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('');
  336.                         function a(){
  337.                         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('');};
  338.                         if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);
  339.                         else a();
  340.                 })(screen,document,encodeURIComponent,'','',imagelink,content.replace(/\[.*?\]/g,""),url,'utf-8');
  341.                 return false;
  342.         }      
  343. }
  344.  
  345. function twshare(surl, url, title, img, w, h){ 
  346.         var _t = encodeURIComponent(title);
  347.                 var _url = encodeURIComponent(url);
  348.                 var _pic = encodeURIComponent(img);
  349.                 var _u = surl+_url+'&pic='+_pic+'&title='+_t;
  350.                 window.open( _u,'', 'width='+w+', height='+h+', top=0, left=0, toolbar=no, menubar=no, scrollbars=no, location=yes, resizable=no, status=no' );
  351.         }
  352. function pb(type, act, param){
  353.         try{
  354.                 var imgurl = ["http://pb.sogou.com/"+type+".gif?uigs_productid=webapp&type=moon&uigs_t="];
  355.                 imgurl.push((new Date()).getTime());
  356.                 if(type == 'pv'){
  357.                         imgurl.push('&act=',act);
  358.                 }else{
  359.                         imgurl.push('&uigs_cl=', act);
  360.                 }
  361.                 imgurl.push("&uniqueid=", uniqueid);
  362.                 if(act != 'water'){
  363.                         imgurl.push('&pictype=', curImage);
  364.                 }
  365.                 if (param) {
  366.                         for (var i in param) {
  367.                                 imgurl.push("&", i, "=", param[i]);
  368.                         }
  369.                 }
  370.                 (new Image()).src = imgurl.join("");
  371.         }catch(e){
  372.         }
  373. }
  374.  
  375. var drawCount = 0, enAutoTouch = true, mouseoverCount = 0;
  376.  
  377. var canvas = document.createElement('canvas'),
  378. fcanvas = document.createElement('canvas'),
  379. fcanvas2 = document.createElement('canvas'),
  380. dcanvas = document.createElement('canvas'),
  381. ctx = canvas.getContext('2d'),
  382. fctx = fcanvas.getContext('2d'),
  383. fctx2 = fcanvas2.getContext('2d'),
  384. dctx = dcanvas.getContext('2d'),
  385. background = document.createElement('img'),
  386. foreground = document.createElement('img'),
  387. loaded = 0, texture=null,
  388. wm = new waterModel(),
  389. mouseDown = 0,
  390. logo = document.getElementById("logo"),
  391. imageshowed = 0,
  392. curImage = 0,
  393. nextImage = 0,
  394. imageGroup = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  395. movedTime = 0,
  396. alpha = 0;
  397.  
  398. logo.appendChild(dcanvas);
  399. canvas.setAttribute('width', WIDTH_IMG);
  400. canvas.setAttribute('height', HEIGHT_IMG);
  401. fcanvas.setAttribute('width', FORE_WIDTH);
  402. fcanvas.setAttribute('height', FORE_HEIGHT);
  403. fcanvas2.setAttribute('width', FORE_WIDTH);
  404. fcanvas2.setAttribute('height', FORE_HEIGHT);
  405. dcanvas.setAttribute('width', WIDTH_IMG);
  406. dcanvas.setAttribute('height', HEIGHT_IMG);
  407.  
  408. background.onload = imageLoaded;
  409. foreground.onload = imageLoaded;
  410. background.src = "/logo/midfall/images/sogoulogo.jpg";
  411. foreground.src = "/logo/midfall/images/icon.png";
  412. drawFrame();
  413. // }
  414.  
  415. // sogouWater();
  416.  

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

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666