整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          給你看八個網(wǎng)頁特效,讓你的網(wǎng)站建設(shè)更加引人入勝!

          給你看八個網(wǎng)頁特效,讓你的網(wǎng)站建設(shè)更加引人入勝!

          站設(shè)計是一個永無止境的創(chuàng)意工作,優(yōu)秀的網(wǎng)站通常伴有多個具有一定難度的網(wǎng)頁特效。當(dāng)然,一款設(shè)計精良、用戶體驗(yàn)度高的網(wǎng)站對您的業(yè)務(wù)推廣是至關(guān)重要的。

          在這個互聯(lián)網(wǎng)數(shù)字時代,網(wǎng)站幾乎是每一個客戶的第一聯(lián)系人,這表示著您的網(wǎng)站必須能代表您提供具有說服力的內(nèi)容,并能將潛在用戶轉(zhuǎn)化為真實(shí)客戶。

          根據(jù)Adobe在2015年的研究,如果人們在互聯(lián)網(wǎng)上瀏覽的時間只有15分鐘,那么其中三分之二的時間是在與那些設(shè)計較為高端的網(wǎng)站進(jìn)行互動。同樣,約60%的人會選擇與高端設(shè)計或帶有個性網(wǎng)頁特效的網(wǎng)站進(jìn)行接觸,而不是停留在一個看上去很普通的網(wǎng)站上面。

          更多的統(tǒng)計數(shù)字指出了網(wǎng)站設(shè)計的重要性,在這里,北京網(wǎng)站建設(shè)公司千助科技將介紹八種網(wǎng)站特效來讓你的網(wǎng)站更具吸引力。

          1. 添加一個倒計時的網(wǎng)頁特效來增強(qiáng)客戶的好奇心

          當(dāng)您準(zhǔn)備新上線一個業(yè)務(wù)或一款產(chǎn)品時,您的營銷工作應(yīng)該在實(shí)際網(wǎng)頁發(fā)布之前就開始啟動了,你可以通過一個倒計時的網(wǎng)頁特效來通知客戶,馬上會有好事情發(fā)生!不要等到你一切都準(zhǔn)備好了,才想起來還沒有通知客戶。

          2. 添加視頻背景

          你知道什么樣的特效在網(wǎng)站中是不可忽視的嗎?那就是動態(tài)元素!它會將訪客的注意力瞬間集中起來,這是非常符合人性的。如果你在自己的網(wǎng)站上使用了一個引人入勝的視頻背景,那么它除了可以美化你的網(wǎng)站外,還能吸引訪客的注意力。

          加入視頻背景的網(wǎng)頁特效還能讓你的網(wǎng)站看起來非常有現(xiàn)代感,它增加的是一個可以讓人感興趣的元素,可不是一幅靜態(tài)圖像。根據(jù) Food Blogger Pro 的統(tǒng)計,他們通過添加一個完美的視頻背景,將著陸頁的轉(zhuǎn)化率提高了138%!這不是很神奇嗎?

          但是請注意,視頻背景在設(shè)計上也是件很棘手的事情,你必須以正確的方式讓它和網(wǎng)頁上的其他元素完美融合,通過你的美學(xué)設(shè)計讓他們看上去非常和諧。

          3. 添加背景紋理的按鈕或鏈接

          將紋理添加到可以點(diǎn)擊的按鈕或鏈接背景,可以大幅提高網(wǎng)站的外觀效果,并能使按鈕或鏈接脫穎而出,將用戶引導(dǎo)到重要的可點(diǎn)擊操作中,提升網(wǎng)站整體的導(dǎo)航性。

          4. 定制登錄頁面

          即便登錄頁面只是提供給您的團(tuán)隊(duì)或員工使用,也不能降低它得設(shè)計質(zhì)量和精細(xì)度。因?yàn)樗情_始一份工作的出發(fā)地,有一個好的開始會讓接下來的工作事半功倍。

          如果是提供給客戶使用的登錄頁面,你還可以根據(jù)他們的需求進(jìn)行一些定制化的設(shè)計,比如幫助他們記住上次的登錄信息、找回忘記的密碼、或使用安全控件進(jìn)行登錄等。另外,登錄頁面的酷炫設(shè)計也會讓你的網(wǎng)站看起來非常專業(yè)化和上檔次。

          5. 給圖像或產(chǎn)品增加特殊效果

          根據(jù) Hubspot 的統(tǒng)計,與圖像結(jié)合的文字內(nèi)容被人記住的可能性比沒有圖像的文字要高出40倍,也就是說,具有圖像的文字內(nèi)容將更容易被訪客記住。

          當(dāng)您了解了圖像的重要性以及它們的巨大吸引力時,你就知道該如何以最佳方式呈現(xiàn)它們了。使用 Photoshop 來增強(qiáng)圖像的特殊效果是再好不過的了,使用過濾器、調(diào)整對比度/色調(diào)/亮度、或添加其他的特殊效果,都可以讓圖片看起來更加生動。

          6. 增加文字懸停的網(wǎng)頁特效

          為網(wǎng)站增加文字懸停的網(wǎng)頁特效是最近的一種趨勢,文字懸停效果看起來很酷,并以非常有趣的方式挖掘重要或相關(guān)的信息。例如,如果您將鼠標(biāo)懸停的圖像上時,則會出現(xiàn)一組文本,來顯示產(chǎn)品名稱或相關(guān)說明,這些特效可以讓網(wǎng)站顯得非常時尚。

          7. 用動畫吸引觀眾

          無論是 GIF 動畫,還是 Javascript 網(wǎng)頁特效動畫,都有百萬種方法可以吸引用戶的注意力。你可以跟隨滾動條滑動給出翻頁動畫,也可以跟隨鼠標(biāo)移上給出高亮顯示特效。

          8. 添加一個翻書特效,而不是傳統(tǒng)的產(chǎn)品目錄

          你可能已經(jīng)遇到過這種奇妙的網(wǎng)頁特效,一個模擬真正的翻書特效,它看起來就像一本真正的書,您可以在圖書頁面上看到圖像和文字。當(dāng)您點(diǎn)擊頁面時,頁面會以非常逼真的方式將這一頁翻過去,它肯定會比一個靜態(tài)的產(chǎn)品目錄更加吸引人。

          以上所有這些方式將有助于改善您網(wǎng)站的整體外觀和感覺,增強(qiáng)網(wǎng)站的體驗(yàn)度,并幫助您將訪客轉(zhuǎn)化為潛在客戶,您還等什么?現(xiàn)在就可以聯(lián)系北京網(wǎng)站建設(shè)公司千助科技,為您提供高端網(wǎng)站建設(shè)服務(wù),期待驚人的結(jié)果吧!

          年是2017年了,前端找工作也越來越難,在2015年前端真的就是爆炸,會做個靜態(tài)頁面也能有公司要你,雖然說工資不是非常高,但是你只要會點(diǎn)javascript那工資就可觀了,我有個同事以前就是培訓(xùn)過的,現(xiàn)在做了部門的主管,現(xiàn)在新人只要是培訓(xùn)的他都一概回絕,可怕,關(guān)鍵是這哥們自己就是培訓(xùn)出來的,大概自己也知道自己剛?cè)肼殨r是幾桶水,混到現(xiàn)在也不容易,不能苦了后輩們啊,到現(xiàn)在找工作的要求確實(shí)高了,如果你沒找到工作會做這個特效不一定能找到工作,但是如果你在職會做這個你的工資一定不會低于八千,看清楚這是兩個球嵌套旋轉(zhuǎn),不是一個球。

          在這里還是要說提下我自己建的前端學(xué)習(xí)群:593757064,不說別的,能進(jìn)我的群的沒點(diǎn)實(shí)力咋行呢,哈哈,當(dāng)然零基礎(chǔ)小白我也挺歡迎,畢竟誰都是從零開始的嘛,只要肯多問多想多練,早晚超過我,不定期分享干貨,歡迎初學(xué)和進(jìn)階中的小伙伴。

          下面這個動態(tài)圖就是今天講的特效:

          截圖讓你看下效果:

          源碼全部分享:

          剛學(xué)javascript時很多都會出現(xiàn)這種情況,想學(xué)這個知識點(diǎn),確發(fā)現(xiàn)要先學(xué)十個知識點(diǎn) ,的這種情況,會產(chǎn)生一種無力感,而且本身這些知識點(diǎn)之間相互也沒有什么聯(lián)系,只能靠自己全學(xué)會后,然后在融會貫通,這肯定很困難,許多人都在這里迷失了方向,這就是沒有全局視角而導(dǎo)致的,感覺前端學(xué)不完,沒有盡頭,讓人很容易產(chǎn)生畏難的情緒,解決方法其實(shí)很簡單,就是把所有里零散的知識點(diǎn)結(jié)合項(xiàng)目當(dāng)成一個整體來學(xué),不信你試試。

          最后再說二點(diǎn)建議吧:

          1. 學(xué)會利用碎片式學(xué)習(xí),有很多人總是找借口,沒時間學(xué)習(xí),暑假學(xué)習(xí),寒假學(xué)習(xí),把這個事做完了在學(xué)習(xí),我只想對這類人,學(xué)習(xí)不需要準(zhǔn)備,本身就是一場修行。

          2. 這個javascript特效就算做完了,想要完整代碼自己練習(xí)的小伙伴進(jìn)我的群自助領(lǐng)取,已經(jīng)上傳到群文件里了:593757064,歡迎初學(xué)和進(jìn)階中的小伙伴。

          如果想看到更加系統(tǒng)的文章和學(xué)習(xí)方法經(jīng)驗(yàn)可以關(guān)注我的微信公眾號:‘web前端課程’關(guān)注后回復(fù)‘給我資料’可以領(lǐng)取一套完整的學(xué)習(xí)視頻

          者:前端Q

          轉(zhuǎn)發(fā)鏈接:https://mp.weixin.qq.com/s/ewFfXptccFs5KvjUINLGbQ

          前端

          小試牛刀,實(shí)現(xiàn)了六款簡單常見HTML5 Canvas特效濾鏡,并且封裝成一個純JavaScript可調(diào)用的API文件gloomyfishfilter.js。支持的特效濾鏡分別為:

          1.反色

          2.灰色調(diào)

          3.模糊

          4.浮雕

          5.雕刻

          6.合理

          濾鏡原理解釋:

          2.灰色調(diào):獲取一個預(yù)期點(diǎn)RGB值r,g,b則新的RGB值

          newr=(r * 0.272)+(g * 0.534)+(b * 0.131);

          newg=(r * 0.349)+(g * 0.686)+(b * 0.168);

          newb=(r * 0.393)+(g * 0.769)+(b * 0.189);

          3.模糊:基于一個5 * 5的卷積核

          4.浮雕與雕刻:

          根據(jù)當(dāng)前預(yù)期的前一個預(yù)期RGB值與它的后一個重新的RGB值之差再加上128

          5.總體:模擬了物體在鏡子中與之對應(yīng)的效果。

          雜項(xiàng)準(zhǔn)備

          1、如何獲取Canvas 2d context對象

          var canvas=document.getElementById("target");
          
          canvas.width=source.clientWidth;
          
          canvas.height=source.clientHeight;
          
          **if**(!canvas.getContext) {
          
             console.log("Canvas not supported. Please install a HTML5compatible browser.");
          
             **return**;
          
          }
          
          // get 2D context of canvas and draw image
          
          tempContext=canvas.getContext("2d");

          2、如何添加一個DOM img對象到Canvas對象中

          var source=document.getElementById("source");
          
          tempContext.drawImage(source, 0, 0, canvas.width,canvas.height);

          3、如何從Canvas對象中獲取預(yù)定數(shù)據(jù)

          var canvas=document.getElementById("target");
          
          var len=canvas.width * canvas.height * 4;
          
          var canvasData=tempContext.getImageData(0, 0, canvas.width, canvas.height);
          
          var binaryData=canvasData.data;

          4、如何對DOM對象實(shí)現(xiàn)鼠標(biāo)ClickEvent綁定

          function bindButtonEvent(element, type, handler) 
          {  
          
          if(element.addEventListener){ 
          
                element.addEventListener(type, handler,**false**); 
          
             }else{ 
          
                element.attachEvent('on'+type, handler);// for IE6,7,8
          
             } 
          
          }

          5、如何調(diào)用實(shí)現(xiàn)的gfilter API完成濾鏡功能

          <scriptsrc=*"gloomyfishfilter.js"*></script> //導(dǎo)入API文件
          
          gfilter.colorInvertProcess(binaryData, len); //調(diào)用 API

          6、瀏覽器支持:IE,F(xiàn)F,Chrome上測試通過,其中IE上支持通過以下標(biāo)簽實(shí)現(xiàn):

          <meta http-equiv="X-UA-Compatible"*content=*"chrome=IE8"> 


          效果演示:

          應(yīng)用程序源代碼:

          CSS部分:

          #svgContainer {
            width:800px;
            height:600px;
            background-color:#EEEEEE;
          }
          
          #sourceDiv { float: left; border: 2px solid blue} 
          #targetDiv { float: right;border: 2px solid red}

          filter1.html中HTML源代碼:

          <!DOCTYPE html>
          <html>
          <head>
          <meta http-equiv="X-UA-Compatible" content="chrome=IE8">
          <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
          <title>Canvas Filter Demo</title>
          <link href="default.css" rel="stylesheet" />
          <script src="gloomyfishfilter.js"></scrip>
          </head>
          <body>
            <h1>HTML Canvas Image Process - By Gloomy Fish</h1>
            <div id="svgContainer">
              <div id="sourceDiv">
                <img id="source" src="../test.png" />
              </div>
              <div id="targetDiv">
                <canvas id="target"></canvas>
              </div>
            </div>
            <div id="btn-group">
              <button type="button" id="invert-button">反色</button>
              <button type="button" id="adjust-button">灰色調(diào)</button>
              <button type="button" id="blur-button">模糊</button>
              <button type="button" id="relief-button">浮雕</button>
              <button type="button" id="diaoke-button">雕刻</button>
              <button type="button" id="mirror-button">鏡像</button>
            </div>
          </body>
          </html>

          filter1.html中JavaScript源代碼:

          var tempContext=null; // global variable 2d context
              window.onload=function() {
                var source=document.getElementById("source");
                var canvas=document.getElementById("target");
                canvas.width=source.clientWidth;
                canvas.height=source.clientHeight;
          
                if (!canvas.getContext) {
                    console.log("Canvas not supported. Please install a HTML5 compatible browser.");
                    return;
                }
          
                // get 2D context of canvas and draw image
                tempContext=canvas.getContext("2d");
                tempContext.drawImage(source, 0, 0, canvas.width, canvas.height);
          
                    // initialization actions
                    var inButton=document.getElementById("invert-button");
                    var adButton=document.getElementById("adjust-button");
                    var blurButton=document.getElementById("blur-button");
                    var reButton=document.getElementById("relief-button");
                    var dkButton=document.getElementById("diaoke-button");
                    var mirrorButton=document.getElementById("mirror-button");
          
                    // bind mouse click event
                    bindButtonEvent(inButton, "click", invertColor);
                    bindButtonEvent(adButton, "click", adjustColor);
                    bindButtonEvent(blurButton, "click", blurImage);
                    bindButtonEvent(reButton, "click", fudiaoImage);
                    bindButtonEvent(dkButton, "click", kediaoImage);
                    bindButtonEvent(mirrorButton, "click", mirrorImage);
              }
          
              function bindButtonEvent(element, type, handler)  
          {  
                if(element.addEventListener) {  
                   element.addEventListener(type, handler, false);  
                } else {  
                   element.attachEvent('on'+type, handler); // for IE6,7,8
                }  
              }  
          
              function invertColor() {
                var canvas=document.getElementById("target");
                var len=canvas.width * canvas.height * 4;
                var canvasData=tempContext.getImageData(0, 0, canvas.width, canvas.height);
                var binaryData=canvasData.data;
          
                    // Processing all the pixels
                    gfilter.colorInvertProcess(binaryData, len);
          
                    // Copying back canvas data to canvas
                    tempContext.putImageData(canvasData, 0, 0);
              }
          
              function adjustColor() {
                var canvas=document.getElementById("target");
                var len=canvas.width * canvas.height * 4;
                var canvasData=tempContext.getImageData(0, 0, canvas.width, canvas.height);
                    var binaryData=canvasData.data;
          
                    // Processing all the pixels
                    gfilter.colorAdjustProcess(binaryData, len);
          
                    // Copying back canvas data to canvas
                    tempContext.putImageData(canvasData, 0, 0);
              }
          
              function blurImage() 
          {
                var canvas=document.getElementById("target");
                var len=canvas.width * canvas.height * 4;
                var canvasData=tempContext.getImageData(0, 0, canvas.width, canvas.height);
          
                    // Processing all the pixels
                    gfilter.blurProcess(tempContext, canvasData);
          
                    // Copying back canvas data to canvas
                    tempContext.putImageData(canvasData, 0, 0);
              }
          
              function fudiaoImage() 
          {
                var canvas=document.getElementById("target");
                var len=canvas.width * canvas.height * 4;
                var canvasData=tempContext.getImageData(0, 0, canvas.width, canvas.height);
          
                    // Processing all the pixels
                    gfilter.reliefProcess(tempContext, canvasData);
          
                    // Copying back canvas data to canvas
                    tempContext.putImageData(canvasData, 0, 0);
              }
          
              function kediaoImage() 
          {
                var canvas=document.getElementById("target");
                var len=canvas.width * canvas.height * 4;
                var canvasData=tempContext.getImageData(0, 0, canvas.width, canvas.height);
          
                    // Processing all the pixels
                    gfilter.diaokeProcess(tempContext, canvasData);
          
                    // Copying back canvas data to canvas
                    tempContext.putImageData(canvasData, 0, 0);
              }
          
              function mirrorImage() 
          {
                var canvas=document.getElementById("target");
                var len=canvas.width * canvas.height * 4;
                var canvasData=tempContext.getImageData(0, 0, canvas.width, canvas.height);
          
                    // Processing all the pixels
                    gfilter.mirrorProcess(tempContext, canvasData);
          
                    // Copying back canvas data to canvas
                    tempContext.putImageData(canvasData, 0, 0);
              }

          濾鏡源代碼(gloomyfishfilter.js):

          var gfilter={
              type: "canvas",
              name: "filters",
              author: "zhigang",
              getInfo: function () {
                  return this.author + ' ' + this.type + ' ' + this.name;
              },
          
              /**
               * invert color value of pixel, new pixel=RGB(255-r, 255-g, 255 - b)
               * 
               * @param binaryData - canvas's imagedata.data
               * @param l - length of data (width * height of image data)
               */
             colorInvertProcess: function(binaryData, l) {
              for (var i=0; i < l; i +=4) {
                    var r=binaryData[i];
                    var g=binaryData[i + 1];
                    var b=binaryData[i + 2];
          
                    binaryData[i]=255-r;
                    binaryData[i + 1]=255-g;
                    binaryData[i + 2]=255-b;
                }
             },
          
             /**
              * adjust color values and make it more darker and gray...
              * 
              * @param binaryData
              * @param l
              */
            colorAdjustProcess: function(binaryData, l) {
              for (var i=0; i < l; i +=4) {
                    var r=binaryData[i];
                    var g=binaryData[i + 1];
                    var b=binaryData[i + 2];
          
                    binaryData[i]=(r * 0.272) + (g * 0.534) + (b * 0.131);
                    binaryData[i + 1]=(r * 0.349) + (g * 0.686) + (b * 0.168);
                    binaryData[i + 2]=(r * 0.393) + (g * 0.769) + (b * 0.189);
                }
            },
          
            /**
             * deep clone image data of canvas
             * 
             * @param context
             * @param src
             * @returns
             */
            copyImageData: function(context, src)
            {
                var dst=context.createImageData(src.width, src.height);
                dst.data.set(src.data);
                return dst;
            },
          
            /**
             * convolution - keneral size 5*5 - blur effect filter(模糊效果)
             * 
             * @param context
             * @param canvasData
             */
            blurProcess: function(context, canvasData) {
              console.log("Canvas Filter - blur process");
              var tempCanvasData=this.copyImageData(context, canvasData);
              var sumred=0.0, sumgreen=0.0, sumblue=0.0;
              for ( var x=0; x < tempCanvasData.width; x++) {    
                      for ( var y=0; y < tempCanvasData.height; y++) {    
          
                          // Index of the pixel in the array    
                          var idx=(x + y * tempCanvasData.width) * 4;       
                          for(var subCol=-2; subCol<=2; subCol++) {
                            var colOff=subCol + x;
                            if(colOff <0 || colOff >=tempCanvasData.width) {
                              colOff=0;
                            }
                            for(var subRow=-2; subRow<=2; subRow++) {
                              var rowOff=subRow + y;
                              if(rowOff < 0 || rowOff >=tempCanvasData.height) {
                                rowOff=0;
                              }
                              var idx2=(colOff + rowOff * tempCanvasData.width) * 4;    
                                var r=tempCanvasData.data[idx2 + 0];    
                                var g=tempCanvasData.data[idx2 + 1];    
                                var b=tempCanvasData.data[idx2 + 2];
                                sumred +=r;
                                sumgreen +=g;
                                sumblue +=b;
                            }
                          }
          
                          // calculate new RGB value
                          var nr=(sumred / 25.0);
                          var ng=(sumgreen / 25.0);
                          var nb=(sumblue / 25.0);
          
                          // clear previous for next pixel point
                          sumred=0.0;
                          sumgreen=0.0;
                          sumblue=0.0;
          
                          // assign new pixel value    
                          canvasData.data[idx + 0]=nr; // Red channel    
                          canvasData.data[idx + 1]=ng; // Green channel    
                          canvasData.data[idx + 2]=nb; // Blue channel    
                          canvasData.data[idx + 3]=255; // Alpha channel    
                      }
              }
            },
          
            /**
             * after pixel value - before pixel value + 128
             * 浮雕效果
             */
            reliefProcess: function(context, canvasData) {
              console.log("Canvas Filter - relief process");
              var tempCanvasData=this.copyImageData(context, canvasData);
              for ( var x=1; x < tempCanvasData.width-1; x++) 
              {    
                      for ( var y=1; y < tempCanvasData.height-1; y++)
                      {    
          
                          // Index of the pixel in the array    
                          var idx=(x + y * tempCanvasData.width) * 4;       
                  var bidx=((x-1) + y * tempCanvasData.width) * 4;
                  var aidx=((x+1) + y * tempCanvasData.width) * 4;
          
                          // calculate new RGB value
                          var nr=tempCanvasData.data[aidx + 0] - tempCanvasData.data[bidx + 0] + 128;
                          var ng=tempCanvasData.data[aidx + 1] - tempCanvasData.data[bidx + 1] + 128;
                          var nb=tempCanvasData.data[aidx + 2] - tempCanvasData.data[bidx + 2] + 128;
                          nr=(nr < 0) ? 0 : ((nr >255) ? 255 : nr);
                          ng=(ng < 0) ? 0 : ((ng >255) ? 255 : ng);
                          nb=(nb < 0) ? 0 : ((nb >255) ? 255 : nb);
          
                          // assign new pixel value    
                          canvasData.data[idx + 0]=nr; // Red channel    
                          canvasData.data[idx + 1]=ng; // Green channel    
                          canvasData.data[idx + 2]=nb; // Blue channel    
                          canvasData.data[idx + 3]=255; // Alpha channel    
                      }
              }
            },
          
            /**
             *   before pixel value - after pixel value + 128
             *  雕刻效果
             * 
             * @param canvasData
             */
            diaokeProcess: function(context, canvasData) {
              console.log("Canvas Filter - process");
              var tempCanvasData=this.copyImageData(context, canvasData);
              for ( var x=1; x < tempCanvasData.width-1; x++) 
              {    
                      for ( var y=1; y < tempCanvasData.height-1; y++)
                      {    
          
                          // Index of the pixel in the array    
                          var idx=(x + y * tempCanvasData.width) * 4;       
                  var bidx=((x-1) + y * tempCanvasData.width) * 4;
                  var aidx=((x+1) + y * tempCanvasData.width) * 4;
          
                          // calculate new RGB value
                          var nr=tempCanvasData.data[bidx + 0] - tempCanvasData.data[aidx + 0] + 128;
                          var ng=tempCanvasData.data[bidx + 1] - tempCanvasData.data[aidx + 1] + 128;
                          var nb=tempCanvasData.data[bidx + 2] - tempCanvasData.data[aidx + 2] + 128;
                          nr=(nr < 0) ? 0 : ((nr >255) ? 255 : nr);
                          ng=(ng < 0) ? 0 : ((ng >255) ? 255 : ng);
                          nb=(nb < 0) ? 0 : ((nb >255) ? 255 : nb);
          
                          // assign new pixel value    
                          canvasData.data[idx + 0]=nr; // Red channel    
                          canvasData.data[idx + 1]=ng; // Green channel    
                          canvasData.data[idx + 2]=nb; // Blue channel    
                          canvasData.data[idx + 3]=255; // Alpha channel    
                      }
              }
            },
          
            /**
             * mirror reflect
             * 
             * @param context
             * @param canvasData
             */
            mirrorProcess : function(context, canvasData) {
              console.log("Canvas Filter - process");
              var tempCanvasData=this.copyImageData(context, canvasData);
              for ( var x=0; x < tempCanvasData.width; x++) // column
              {    
                      for ( var y=0; y < tempCanvasData.height; y++) // row
                      {    
          
                          // Index of the pixel in the array    
                          var idx=(x + y * tempCanvasData.width) * 4;       
                  var midx=(((tempCanvasData.width -1) - x) + y * tempCanvasData.width) * 4;
          
                          // assign new pixel value    
                          canvasData.data[midx + 0]=tempCanvasData.data[idx + 0]; // Red channel    
                          canvasData.data[midx + 1]=tempCanvasData.data[idx + 1]; ; // Green channel    
                          canvasData.data[midx + 2]=tempCanvasData.data[idx + 2]; ; // Blue channel    
                          canvasData.data[midx + 3]=255; // Alpha channel    
                      }
              }
            },
          };

          總結(jié)

          感謝閱讀,如果你覺得我今天分享的內(nèi)容,不錯,請點(diǎn)一個贊,謝謝!!


          主站蜘蛛池模板: 日韩成人无码一区二区三区| 久久精品视频一区二区三区| 国产精品日本一区二区在线播放| 亚洲av无码片区一区二区三区| 无码精品久久一区二区三区| 日本伊人精品一区二区三区| 熟妇人妻一区二区三区四区| 国产人妖视频一区二区破除| 99热门精品一区二区三区无码| 日韩人妻无码一区二区三区久久| 在线精品国产一区二区三区| 精品一区二区三区四区在线| 日韩精品一区二区三区老鸦窝| 91久久精品无码一区二区毛片| 消息称老熟妇乱视频一区二区| 精品人妻一区二区三区毛片| 精品国产一区二区三区久久蜜臀| 亚洲国产一区明星换脸| 午夜精品一区二区三区在线视| 一区二区三区四区精品视频| 精品国产免费一区二区三区| 精品视频一区二区三区在线播放| 中文字幕无线码一区2020青青| 亚洲国产一区在线观看| 久久精品国产AV一区二区三区| 亚洲AV日韩综合一区尤物| 91精品乱码一区二区三区| 精品人伦一区二区三区潘金莲| 国产精品综合AV一区二区国产馆| 精品黑人一区二区三区| 国产精品无码一区二区三区不卡 | 日韩伦理一区二区| 国产在线观看91精品一区| 国产成人一区二区三区高清| 一区二区免费国产在线观看| 一区二区三区影院| 久久久久人妻精品一区| 成人区人妻精品一区二区不卡| 秋霞电影网一区二区三区| 久久精品一区二区影院| 91视频国产一区|