前言

圖片是由連續(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í)有所幫助，也希望大家多多支持腳本之家。