Пытаюсь использовать изображение для маскировки другого изображения, затем подсчитываю цвета пикселей на основе результа ⇐ Html

[Anonymous]

Я использую черный круг в качестве маски красного прямоугольника размером 100x100, что составляет 10 000 пикселей. Маска выглядит великолепно и дает красивый красный круг, но когда я пытаюсь посчитать все красные пиксели в результате, я получаю 10 000 (исходный прямоугольник), тогда как я должен получить меньшее число (от круга). Я знаю, что мне нужно как-то сгладить маску, и я нашел несколько примеров того, как это сделать, но ни один из них не работает, и вместо того, чтобы загромождать этот пример всем, что я пробовал, я просто объясняю проблему и думаю, что нужно всего лишь несколько строк кода.





Document


window.addEventListener("load", (event) => {
console.log("Page is fully loaded");
init();
});
function init() {
//var myCanvas = document.querySelector("#myCanvas");
var redColorCount=0;
var stage = new createjs.Stage("myCanvas");
// 1. Create your masked graphic (or container)
var shape = new createjs.Shape();
shape.graphics.beginFill("red").drawRect(0, 0, 100, 100); // Red Square

var maskShape = new createjs.Shape();
maskShape.graphics.beginFill("#000").drawCircle(50, 50, 50); //Black Circle for mask
console.log(maskShape.x);
shape.mask = maskShape;

shape.cache(0, 0, 100, 100);

var cacheCanvas = shape.cacheCanvas;
var ctx = cacheCanvas.getContext("2d");
var imageData = ctx.getImageData(0, 0, 100, 100).data;

console.log(imageData);
stage.addChild(shape);
shape.uncache();
stage.update();
console.log("Length: "+imageData.length);
for (var i = 0; i < imageData.length; i += 4) {
if ((imageData == 255) && (imageData[i+1] == 0) && (imageData[i+2] == 0)){
redColorCount++;
}
}
console.log("redColorCount: "+redColorCount);
}