前端面試的一道算法題（使用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>