Javascript-форум - Определение площади нарисованного Canvas пространства

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Определение площади нарисованного Canvas пространства (https://javascript.ru/forum/dom-window/45373-opredelenie-ploshhadi-narisovannogo-canvas-prostranstva.html)

Определение площади нарисованного Canvas пространства

Всем привет! Если кто в курсе, подскажите пожалуйста, как определить занятую площадь от всего пространства canvas? Например если у меня три квадрата разбросаны по области, можно одного цвета. Можно в процентах от общей площади canvas, можно просто в пикселях, может быть по области заливки, или же конкретного цвета? Как нибудь нужно определить использованное пространство...

Вручную посчитать соотношение пикселей через .getImageData() .)

Цитата:

Сообщение от Aetae (Сообщение 299556)

Вручную посчитать соотношение пикселей через .getImageData() .)

можно, но если область canvas будет 500px*500px, не велика ли нагрузка на процессор создания 1.000.000 значений одного массива в одном цикле, и проверки 750.000 значений (прозрачность не учитываем) на неравенство нулю?

Цитата:

Сообщение от BratKilla (Сообщение 299558)

ImageData это не просто массив, а typedArray т.е. оперирующий низкоуровневыми значениями, так что всё должно быть относительно быстро. Пример:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function(){
	var canvas = document.createElement('canvas');
	canvas.width = window.innerWidth - 20;
	canvas.height = window.innerHeight - 20;
	
	var div = document.createElement('div');
	
	var ctx = canvas.getContext("2d"),
		length = canvas.width * canvas.height,
		drawing = false, x, y;
		
		
		
	function showPercentage(){
		var data = new Int32Array( ctx.getImageData(0,0,canvas.width,canvas.height).data.buffer );
		for(var i = length, j = 0; i; i--) if( data[i] !== 0) j++;
		div.innerHTML = 'Закрашено ' + (j / length * 100).toFixed(2)  + '% (' + j + 'px)';
	}
	
	canvas.onmousedown = function(e){
		ctx.beginPath();
		ctx.strokeStyle = '#000000';
		ctx.lineWidth = 1;
		ctx.moveTo(e.clientX, e.clientY);
		
		drawing = true;
	}
	
	canvas.onmouseup = function(e){
		if (drawing) {	
			ctx.lineTo(e.clientX, e.clientY);	
			
			showPercentage();
			
			drawing = false;
		}
	}
	
	canvas.onmousemove = function(e){
		if (drawing) {	
			ctx.lineTo(x = e.clientX, y = e.clientY);
			ctx.stroke();
			ctx.moveTo(x, y);
		}
	}
	
	document.body.appendChild(canvas);
	document.body.appendChild(div);
}
</script>
<style>
	*{margin:0;padding:0}
	html,body{
		width:100%;
		height:100%;
	}
	canvas {
		cursor:crosshair;
	}
	div {
		position: absolute;
		top: 0px;
		left: 0px;
		cursor: default;
		font-size:18pt;
	}
</style>
</head>
<body>
</body>
</html>

спасибо Aetae! буду пользоваться, думаю вопрос исчерпан, дополнительное спасибо за оперативность и наглядный пример!

Научное название - гистограмма.