前言
圖片是由連續的點信息組成，每個點信息包含四個長度即rgba信息，通過遍歷配合處理函數實現對點個數的判斷。
實現思路
本例子采用png格式圖片，只需要判該點透明度（opacity）是否為0即可確定是否為小球上一點，如果不為0，判斷上下左右方向的點是否透明度為0，不為0遞歸該結果，并且將該點的rgba信息置為0；結束后開始下一個主循環并計數，直至循環結束。
具體步驟
創建canvas對象，加載目標圖片，使用canvas的drawImage方法將該圖片對象寫入canvas中；參數為圖片對象,貼圖起點橫坐標,貼圖起點縱坐標，貼圖寬度，貼圖高度。
var canvas = document.createElement('canvas'),var ctx = canvas.getContext('2d');ctx.drawImage(imgObj, 0, 0,imgWidth,imgHeight);獲取圖片的相關信息canvas的getImageData方法，需要使用圖片上各點的rgba信息；參數為采點起始橫坐標,采點起始縱坐標，采點寬度，采點高度。
var imageData = ctx.getImageData(0,0,width,height);//改寫imageData.data信息實現點的計數
遍歷圖片的點信息imageData.data，四個點為一組增長條件為i+4，當透明度不為0時調用處理函數，并且終止循環（終止循環，防止短時間內循環次數過多造成內存溢出），循環條件為numberStart<imageData.data.length-1 結束，number為最終的點數量;numberStart為上次循環結束時點的索引值，number為點的數量，judgeZero為處理函數。
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); } }點的處理函數，根據圖片的寬和高計算出點的坐標(x,y)，并且計算出該點上下左右四個點的透明度信息。
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; }判斷四個方向的透明度是否為0，如果為0繼續調用，并且擦出該點信息。
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的所有點信息置為0，之后該點不會對主循環的判斷有影響。
function clearRgb(index){ imageData.data[index] = 0; imageData.data[index+1] = 0; imageData.data[index+2] = 0; imageData.data[index+3] = 0; }執行4，5，6步驟直至所有點rgba信息都被置為0，主循環繼續，最后可得到數量。
總結
主要的原理為獲取球上的一點，通過上下左右遞歸來判斷連續點并消除點信息，至該點的信息已在imageData.data中全部抹去，此過程記為1個點，主循環繼續；圖片為png格式，點的類型不限于圓形；該方法僅供參考。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
