給你看八個網(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)建議吧：

學(xué)會利用碎片式學(xué)習(xí)，有很多人總是找借口，沒時間學(xué)習(xí)，暑假學(xué)習(xí)，寒假學(xué)習(xí)，把這個事做完了在學(xué)習(xí)，我只想對這類人，學(xué)習(xí)不需要準(zhǔn)備，本身就是一場修行。
這個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)一個贊，謝謝！！

在線咨詢

上一篇：日本IPA發(fā)布2023年版“信息安全10大威脅”
下一篇：好奇！僅 13kB 大小的游戲，源碼長啥樣？

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商