题目：
平面上有若干个不特定的形状，如下图所示。请写程序求出物体的个数，以及每个不同物体的面积。
斜体文字
最终代码：
<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>