前言

圖片是由連續(xù)的點(diǎn)信息組成，每個(gè)點(diǎn)信息包含四個(gè)長(zhǎng)度即rgba信息，通過(guò)遍歷配合處理函數(shù)實(shí)現(xiàn)對(duì)點(diǎn)個(gè)數(shù)的判斷。

實(shí)現(xiàn)思路

本例子采用png格式圖片，只需要判該點(diǎn)透明度（opacity）是否為0即可確定是否為小球上一點(diǎn)，如果不為0，判斷上下左右方向的點(diǎn)是否透明度為0，不為0遞歸該結(jié)果，并且將該點(diǎn)的rgba信息置為0；結(jié)束后開(kāi)始下一個(gè)主循環(huán)并計(jì)數(shù)，直至循環(huán)結(jié)束。

具體步驟

創(chuàng)建canvas對(duì)象，加載目標(biāo)圖片，使用canvas的drawImage方法將該圖片對(duì)象寫(xiě)入canvas中；參數(shù)為圖片對(duì)象,貼圖起點(diǎn)橫坐標(biāo),貼圖起點(diǎn)縱坐標(biāo)，貼圖寬度，貼圖高度。

var canvas = document.createElement('canvas'),var ctx = canvas.getContext('2d');ctx.drawImage(imgObj, 0, 0,imgWidth,imgHeight);

獲取圖片的相關(guān)信息canvas的getImageData方法，需要使用圖片上各點(diǎn)的rgba信息；參數(shù)為采點(diǎn)起始橫坐標(biāo),采點(diǎn)起始縱坐標(biāo)，采點(diǎn)寬度，采點(diǎn)高度。

var imageData = ctx.getImageData(0,0,width,height);//改寫(xiě)imageData.data信息實(shí)現(xiàn)點(diǎn)的計(jì)數(shù)

遍歷圖片的點(diǎn)信息imageData.data，四個(gè)點(diǎn)為一組增長(zhǎng)條件為i+4，當(dāng)透明度不為0時(shí)調(diào)用處理函數(shù)，并且終止循環(huán)（終止循環(huán)，防止短時(shí)間內(nèi)循環(huán)次數(shù)過(guò)多造成內(nèi)存溢出），循環(huán)條件為numberStart<imageData.data.length-1 結(jié)束，number為最終的點(diǎn)數(shù)量;numberStart為上次循環(huán)結(jié)束時(shí)點(diǎn)的索引值，number為點(diǎn)的數(shù)量，judgeZero為處理函數(shù)。

  function repeateData(){    for(var i=numberStart;i<imageData.data.length;i+=4){      numberStart+=4;      var a = imageData.data[i+3];      if(a != 0) {        judgeZero(i,number);        break;      }    }    if(numberStart<imageData.data.length-1){      repeateData()    }else{      console.log(number);    }  }

點(diǎn)的處理函數(shù)，根據(jù)圖片的寬和高計(jì)算出點(diǎn)的坐標(biāo)(x,y)，并且計(jì)算出該點(diǎn)上下左右四個(gè)點(diǎn)的透明度信息。

  function judgeZero(index){    number++;    clearPoints(index);  }  function clearPoints(index){    var x = (index/4)%width,      y = Math.floor(index/4/width);    var up = (x+(y-1)*width)*4,      down = (x+(y+1)*width)*4,      right = (x+1+y*width)*4,      left = (x-1+y*width)*4;    var uA = imageData.data[up+3],      bA = imageData.data[down+3],      rA = imageData.data[right+3],      lA = imageData.data[left+3];  }  function clearRgb(index){    imageData.data[index] = 0;    imageData.data[index+1] = 0;    imageData.data[index+2] = 0;    imageData.data[index+3] = 0;  }

判斷四個(gè)方向的透明度是否為0，如果為0繼續(xù)調(diào)用，并且擦出該點(diǎn)信息。

  if(uA != 0){    clearRgb(up);    clearPoints(up);  }  if(bA != 0){    clearRgb(down);    clearPoints(down);  }  if(rA != 0){    clearRgb(right);    clearPoints(right);  }  if(lA != 0){    clearRgb(left);    clearPoints(left);  }

將透明度不為0的所有點(diǎn)信息置為0，之后該點(diǎn)不會(huì)對(duì)主循環(huán)的判斷有影響。

  function clearRgb(index){    imageData.data[index] = 0;    imageData.data[index+1] = 0;    imageData.data[index+2] = 0;    imageData.data[index+3] = 0;  }

執(zhí)行4，5，6步驟直至所有點(diǎn)rgba信息都被置為0，主循環(huán)繼續(xù)，最后可得到數(shù)量。

總結(jié)

主要的原理為獲取球上的一點(diǎn)，通過(guò)上下左右遞歸來(lái)判斷連續(xù)點(diǎn)并消除點(diǎn)信息，至該點(diǎn)的信息已在imageData.data中全部抹去，此過(guò)程記為1個(gè)點(diǎn)，主循環(huán)繼續(xù)；圖片為png格式，點(diǎn)的類(lèi)型不限于圓形；該方法僅供參考。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。