分享一个跟前端相关算法题-html教程

题目：

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

如下：

菜鸟教程中canvas的getimagedata方法

• 书写html标签。

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

• js获取canvas对象

  let ctxt = canvas.getContext(&＃39;2d&＃39;);

• js创建image对象

  let img = new Image;
  img.src = &＃39;./image.png&＃39;; //图片路径
  img.Onload= function(){}  //加载成功后的执行函数，之后的代码就写在其中

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

  let coordinates = [];for(let i=0; i<200; i++){
       coordinates[i] = [];
  }

• 获取像素点，也就是使用getimagedata方法。

  ctxt.drawImage(img, 0, 0);  //将图片画如canvas
  let data = ctxt.getImageData(0, 0, 350, 200).data;//读取整张图片的像素。

• 将像素存入二维数组

  let x=0,y=0;  //二维数组的行和列， x：列  y：行
  for(let i =0,len = data.length; i= 350){
            x = 0;
            y++;
        }
  }

• 目前代码如下：

  (function(){
        let ctxt = canvas.getContext(&＃39;2d&＃39;);
        let img = new Image;
        let coordinates = [];
        let h = 200,
            w = 350;
        for(let i=0; i<200; i++){
            coordinates[i] = [];
        }
        img.src = &＃39;./image.png&＃39;; //图片路径
        img.Onload= function(){
            ctxt.drawImage(img, 0, 0);
            let data = ctxt.getImageData(0, 0, 350, 200).data;//读取整张图片的像素。
            let x=0,y=0;
            for(let i =0,len = data.length; i= 350){
                        x = 0;
                        y++;
                    }
                }
                console.log(coordinates);
        }
    })();

• 如图：

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

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

递归回溯算法

//计算连续的面积和个数
const linkSum = (i,j,num)=>{//走过的路就置0
      coordinates[i][j] = 0;
      num++;      //向上
      if((i+1 = 0) && coordinates[i-1][j] == 1){
        num = linkSum(i-1 , j , num);
      }      //向右
    if((j-1 >= 0) && coordinates[i][j-1] == 1){
        num = linkSum(i , j-1 , num);
    }

    return num;
}

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

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

const getCountAndArea = () =>{let sum = [];let count = 0;for(let i = 0; i 
最后的代码
(function(){
        let ctxt = canvas.getContext(&＃39;2d&＃39;);
        let img = new Image;
        let coordinates = [];
        let h = 200,
            w = 350;
        for(let i=0; i<200; i++){
            coordinates[i] = [];
        }
        img.src = &＃39;./image.png&＃39;; //图片路径
        img.Onload= function(){
            ctxt.drawImage(img, 0, 0);
            let data = ctxt.getImageData(0, 0, 350, 200).data;//读取整张图片的像素。
            let x=0,y=0;
            for(let i =0,len = data.length; i= 350){
                        x = 0;
                        y++;
                    }
                }
                // console.log(coordinates);
                let rst = getCountAndArea();
                // console.log(rst);
                console.log(&＃39;个数： &＃39; + rst.count);
                for(let i=0; i{
            let sum = [];
            let count = 0;
            for(let i = 0; i {
            //走过的路就置0
          coordinates[i][j] = 0;
          num++;
          //向上
          if((i+1 = 0) && coordinates[i-1][j] == 1){
            num = linkSum(i-1 , j , num);
          }
          //向右
        if((j-1 >= 0) && coordinates[i][j-1] == 1){
            num = linkSum(i , j-1 , num);
        }

        return num;
        }
    })();
运行的结果：
343599877，我们一起学前端！
以上就是分享一个跟前端相关算法题的详细内容，更多请关注 第一PHP社区 其它相关文章！