前端面试经典一题

分享前端

（使用canvas解答）

下面说一个跟前端有点相关并且有点趣的一道算法题。

题目：

平面上有若干个不特定的形状，如下图所示。请写程序求出物体的个数，以及每个不同物体的面积。

image.png

分析

想要知道有多少个图形，想到的就是先获取图片中的每一个像素点然后判获取像素点的背景颜色（RGBA）。想要获得图片中的每一个像素点，那就可以联想到使用h5的canvas。

如下：

菜鸟教程中canvas的getimagedata方法

• 书写html标签。

  对不你，你的浏览器不支持Canvas

• js获取canvas对象

  letctxt=canvas.getContext('2d');

• js创建image对象

  letimg=newImage;

• 创建存储图片像素点的二维数组

  letcoordinates=[];for(leti=0;i<200;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<len;i+=4){

• 目前代码如下：

  (function(){

• 如图：

image.png

• 构成类似如下二维数组：

  0,0,0,0,0,0,0,0,0,0,0,0

  0,0,1,1,1,0,0,0,0,0,0,0

  0,1,1,1,1,0,0,0,0,0,0,0

  0,1,1,1,0,0,0,1,1,1,1,0

  0,0,0,0,0,0,1,1,1,0,0,0

  0,0,0,0,0,0,1,1,1,0,0,0

  0,0,0,0,0,0,0,0,0,0,0,0

那么我们就只需要知道二维数组中这种连续为1的块有多少个就知道了图片中形状有多少个，并且块中有多少个1，那么这个块的面积就是1的个数。

递归回溯算法

//计算连续的面积和个数constlinkSum=(i,j,num)=>{//走过的路就置0

不熟悉的，直接百度就好，这里就不多说了，其实代码就反应了很多信息。

使用算法，统计并计算出结果。

constgetCountAndArea=()=>{letsum=[];letcount=0;for(leti=0;i<h;i++)//遍历二维数组

最后的代码

(function(){

运行的结果：

学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群

343599877，我们一起学前端！