据了解，现在前端面试也喜欢考算法题。前几天去面试了，果然面试官给了我四道算法题，让我回去自己做。说一道跟前端有点关系，有点意思的算法题。问题：平面上有几个未指定的形状，如下图所示。请编写一个程序，求出物体的数量和每个不同物体的面积。分析想知道有多少图形。我想到的是先获取图片中的每个像素点，然后判断该像素点的背景色（RGBA）。如果想获取图片中的每一个像素点，可以想到使用h5的canvas。如下：菜鸟教程中canvas的getimagedata方法写html标签。不行，你的浏览器不支持Canvasjs获取canvas对象letctxt=canvas.getContext('2d');js创建图像对象letimg=newImage;img.src='./image.png';//图片路径img.onload=function(){}//加载成功后执行函数，在里面写入如下代码创建一个二维数组，存放图片像素letcoordinates=[];for(leti=0;i<200;i++){coordinates[i]=[];}获取像素点，即使用getimagedata方法。ctxt.drawImage(img,0,0);//将图像绘制为canvasletdata=ctxt.getImageData(0,0,350,200).data;//读取整幅图像的像素。将像素存入二维数组letx=0,y=0;//二维数组的行和列，x：列y：行for(leti=0,len=data.length;i=350){x=0;y++;}}当前代码如下：(function(){letctxt=canvas.getContext('2d');letimg=newImage;letcoordinates=[];leth=200,w=350;for(leti=0;i<200;i++){coordinates[i]=[];}img.src='./image.png';//图片路径img.onload=function(){ctxt.drawImage(img,0,0);letdata=ctxt.getImageData(0,0,350,200).data;//读取整张图片的像素点。让x=0,y=0;for(leti=0,len=data.length;i=350){x=0;y++;}}console.log(坐标);}})();如图：组成类似于下面的二维数组：0,0,0,0,0,0,0,0,0,0,0,00,0,1,1,1,0,0,0,0,0,0,00,1,1,1,1,0,0,0,0,0,0,00,1,1,1,0,0,0,1,1,1,1,00,0,0,0,0,0,1,1,1,0,0,00,0,0,0,0,0,1,1,1,0,0,00,0,0,0,0,0,0,0,0,0,0,0,那么我们只需要知道二维数组中有多少个连续的1块就可以了知道图中有多少个形状，块中有多少个1，那么这个块的面积就是就是1的个数。递归回溯算法//计算连续的面积和个数constlinkSum=(i,j,num)=>{//走过的路径坐标设为0[i][j]=0;数++；//向上if((i+1=0)&&坐标[i-1][j]==1){num=linkSum(i-1,j,num);}//右if((j-1>=0)&&坐标[i][j-1]==1){num=linkSum(i,j-1,num);}returnnum;}不熟悉的直接百度一下，这里就不多说了，其实代码反映了很多信息。使用算法、统计数据并计算结果。constgetCountAndArea=()=>{让总和=[];让计数=0；for(leti=0;i=350){x=0;y++;}}//console.log(坐标);让rst=getCountAndArea();//console.log(第一个);console.log('计数：'+rst.count);for(leti=0;i{让总和=[];让计数=0；for(leti=0;i{//为经过的路径设置0坐标[i][j]=0;数++；//向上if((i+1=0)&&坐标[i-1][j]==1){num=linkSum(i-1,j,num);}//向右if((j-1>=0)&&坐标[i][j-1]==1){num=linkSum(i,j-1,num);}返回数；}})();运行结果：
