(使用canvas解答)
下面说一个跟前端有点相关并且有点趣的一道算法题。
题目:
平面上有若干个不特定的形状,如下图所示。请写程序求出物体的个数,以及每个不同物体的面积。
分析
想要知道有多少个图形,想到的就是先获取图片中的每一个像素点然后判获取像素点的背景颜色(RGBA)。想要获得图片中的每一个像素点,那就可以联想到使用h5的canvas。 如下:
菜鸟教程中canvas的getimagedata方法http://www.runoob.com/tags/canvas-getimagedata.html
-
书写html标签。 <canvas id="canvas" height="200" width="350">对不你,你的浏览器不支持Canvas</canvas>
-
js获取canvas对象 let ctxt = canvas.getContext('2d');
- js创建image对象
let img = new Image; img.src = './image.png';
- 创建存储图片像素点的二维数组
let coordinates = [];
for(let i=0; i<200; i++){ coordinates[i] = []; }
- 获取像素点,也就是使用getimagedata方法。
ctxt.drawImage(img, 0, 0);
- 将像素存入二维数组
let x=0,y=0;
- 目前代码如下:
(function(){ let ctxt = canvas.getContext('2d')
- 如图:
image.png
-
构成类似如下二维数组: 0,0,0,0,0,0,0,0,0,0,0,0 0,0,1,1,1,0,0,0,0,0,0,0 0,1,1,1,1,0,0,0,0,0,0,0 0,1,1,1,0,0,0,1,1,1,1,0 0,0,0,0,0,0,1,1,1,0,0,0 0,0,0,0,0,0,1,1,1,0,0,0 0,0,0,0,0,0,0,0,0,0,0,0
那么我们就只需要知道二维数组中这种连续为1的块有多少个就知道了图片中形状有多少个,并且块中有多少个1,那么这个块的面积就是1的个数。
递归回溯算法
不熟悉的,直接百度就好,这里就不多说了,其实代码就反应了很多信息。
使用算法,统计并计算出结果。
const getCountAndArea = () =>{
let sum = []; let count = 0; for(let i = 0; i < h; i++)
最后的代码
(function(){ let ctxt = canvas.getContext('2d')
|