Javascript: общая площадь окружностей или сколько цветных пикселов на картинке

Расчёты общей площади или пересечения, образуемого несколькими фигурами, пусть даже просто окружностями, достаточно трудоёмки. Грубый Brute Force, хотя у него в данном случае сложность N², зачастую оказывается более быстрым и очевидным решением - почему бы, к примеру, просто не отрисовать нужную картинку на чёрном и затем подсчитать долю не-чёрных пикселов на ней?

Разумеется, само приведение к конечным по размерности пикселам вместо аналитических формул тоже вносит свою погрешность, но уже на сетке 100 на 100 и выше она вполне приемлема.

Показанный ниже код не нужно считать примером для любых расчётов, где точность и аналитическая строгость имеют значение :) Даже в разных браузерах ответы могут несколько различаться.

Пример можно выполнить в любом современном браузере, сохранив его как файл типа .html

<p>Общая площадь на простом попиксельном сканировании цвета</p>
<p><canvas id="circlesCanvas" width="200" height="200"></canvas></p>
<p>Area = <span id="circlesResult"></span></p>

<script type="text/javascript">
 var canvas = document.getElementById('circlesCanvas');
 var ctx = canvas.getContext('2d');

 function circle(x,y,r) { //Отрисовка окружности на JS
  ctx.beginPath();
  ctx.arc(x, y, r, 0, Math.PI*2);
  ctx.closePath();
  ctx.fill();
 }

 //Заливка фона чёрным
 ctx.fillStyle = 'black';
 ctx.fillRect(0, 0, canvas.width, canvas.height);

 //Отрисовка любыми цветами, кроме фонового
 ctx.fillStyle = 'green';
 circle(100, 100, 40);
 ctx.fillStyle = 'red';
 circle(80, 40, 20);
 ctx.fillStyle = 'blue';
 circle(40, 60, 20);

 //Массив байт RGBA
 var img = ctx.getImageData (0, 0, canvas.width, canvas.height);
 var pixels = img.data;

 //Подсчитать количество не-фоновых пикселов
 var area = 0;
 for (var i = 0; i < pixels.length; i += 4) {
  if (!(pixels[i]==0 && pixels[i+1]==0 && pixels[i+2]==0)) area++;
 }

 //Нормализовать и вывести процент не-фоновых пикселов
 area = area/(canvas.width*canvas.height)*100;
 document.getElementById('circlesResult').innerHTML = area.toFixed(2)+'%';
</script>
<noscript>Нужен включённый Javascript для работы примера</noscript>

вид этого примера в браузере

20.10.2017, 23:21 [2382 просмотра]