前端面试的一道算法题（使用canvas解答）

题目：

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

最终代码：

<canvas id="myCanvas" width="350" height="200" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。
    </canvas>
    <script>
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        let img = new Image;
        img.src = './image.png'; //图片路径
        img.onload = function () {
            let coordinates = [];
            for (let i = 0; i < 200; i++) {
                coordinates[i] = [];
            }
            ctx.drawImage(img, 0, 0); //将图片画在canvas
            let data = ctx.getImageData(0, 0, 350, 200).data; //读取整张图片的像素。
            const width = 350,
                height = 200;
            let row = 0,
                column = 0; //二维数组的行和列， row：行  column：列
            for (let i = 0, len = data.length; i < len; i += 4) {
                let red = data[i], //红色色深
                    green = data[i + 1], //绿色色深
                    blue = data[i + 2], //蓝色色深
                    alpha = data[i + 3]; //透明度
                //把每个像素点，以二位数组的形式展开
                if (`${red} ${green} ${blue}` === '211 228 200') {
                    coordinates[row][column] = 0;
                } else {
                    coordinates[row][column] = 1;
                }
                column++;
                //列宽350 第二列开始
                if (column >= 350) {
                    column = 0;
                    row++;
                }
            }
            let count = 0;
            for (let i = 0; i < height; i++) {

                for (let j = 0; j < width; j++) {
                    
                    if (coordinates[i][j] === 1) {
                        debugger
                        ++count;
                        const num = link(i, j, 0);
                        console.log(`第${count}个图形的大小${num}`);
                    }
                }
            }
            

            function link(rowIndex, cloumnIndex, num = 0) {
                //证明已经检测过该点
                coordinates[rowIndex][cloumnIndex] = 0;
                const upRowIndex = rowIndex - 1;
                const downRowIndex = rowIndex + 1;
                const leftCloumnIndex = cloumnIndex - 1;
                const rightCloumnIndex = cloumnIndex + 1;
                //up
                if ((upRowIndex < height && upRowIndex > 0) && coordinates[upRowIndex][cloumnIndex] === 1) {
                    num = link(upRowIndex, cloumnIndex, ++num);
                }
                //down
                if ((downRowIndex <= height) && coordinates[downRowIndex][cloumnIndex] === 1) {
                    num = link(downRowIndex, cloumnIndex, ++num);
                }
                //left
                if ((leftCloumnIndex < width && leftCloumnIndex > 0) && coordinates[rowIndex][leftCloumnIndex] ===
                    1) {
                    num = link(rowIndex, leftCloumnIndex, ++num);
                }
                //right
                if ((rightCloumnIndex <= width) && coordinates[rowIndex][rightCloumnIndex] === 1) {
                    num = link(rowIndex, rightCloumnIndex, ++num);
                }
                return num;

            }

        }
    </script>