使用图形遮罩后统计像素颜色结果异常的技术求助

用黑色圆形作为100×100（共10000像素）红色矩形的遮罩，视觉上呈现正常的红色圆形，但统计红色像素数仍为10000（原矩形像素数），而非圆形应有的更少数量。需要仅修改少量代码的解决方案。

问题出在统计红色像素时只判断了RGB通道，忽略了遮罩区域外的像素alpha通道为0（完全透明）。只需修改像素判断条件，同时检查alpha通道是否为不透明状态即可。

JavaScript #

window.addEventListener("load", (event) => {
    console.log("Page is fully loaded");
    init();
});
function init() {
    var redColorCount=0;
    var stage = new createjs.Stage("myCanvas");
    // 创建带遮罩的图形
    var shape = new createjs.Shape();
    shape.graphics.beginFill("red").drawRect(0, 0, 100, 100);  // 红色正方形

    var maskShape = new createjs.Shape();
    maskShape.graphics.beginFill("#000").drawCircle(50, 50, 50); // 黑色圆形遮罩
    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;

    stage.addChild(shape);
    shape.uncache();
    stage.update();
    
    console.log("Length: "+imageData.length);
    for (var i = 0; i < imageData.length; i += 4) {
        // 新增alpha通道判断：仅统计不透明的红色像素
        if ((imageData[i] == 255) && (imageData[i+1] == 0) && (imageData[i+2] == 0) && (imageData[i+3] === 255)){
            redColorCount++;
        }
    }
    console.log("redColorCount: "+redColorCount);
}

HTML #

<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<canvas id="myCanvas" width="500" height="350"></canvas>

• CreateJS的遮罩会将遮罩外的像素设置为完全透明（alpha=0），但RGB值仍保留原矩形的红色
• 修改后的判断条件仅统计RGB为纯红且alpha完全不透明的像素，得到的就是视觉上红色圆形的实际像素数

内容的提问来源于stack exchange，提问作者docaberle