前端面试的一道算法题使用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>