Javascript getImageData的加载事件

您好，我有这个脚本，检查透明像素和非透明像素。现在我这样做了，结果来自鼠标上方的100px乘以100px的矩形：

var data = ctx.getImageData(100,100, canvas.width, canvas.height).data;

而现在它在鼠标上显示的是不透明区和透明区的结果

我想以某种方式想象这个加载的矩形，网格覆盖在图像和oppaque框上，透明框有不同的颜色，比如oppaque是绿色，透明框是红色。我需要大概的加载功能？但是它应该是什么样子呢

我被困在这里，需要有人指导我在正确的位置

以下是我目前的进展：

---

由于您可能希望游戏机仍然显示，您可以使用减少的alpha（globalAlpha）绘制100x100个方框

下面是示例代码和演示：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var-boxWidth=100；
var-boxHeight=100；
var boxRows=数学单元（865/boxHeight）；
var boxCols=数学单元（1152/boxWidth）；
变量框=新数组（boxRows*boxCols）；
对于（var i=0；我感谢您的支持，但我打算在完成计算是否包含像素的box1的函数后添加此代码。但无论如何，感谢您，下一步将需要此代码。我仍在尝试使用ctx.getImageData（100100，canvas.width，canvas.height）.data；因此我可以正确检测100 x 100像素的盒子中的像素如果某个盒子部分透明&部分不透明，您会宣布该盒子透明还是不透明？如果盒子中甚至有一个像素，它应该是不透明的。但是现在代码的行为很奇怪。如果您进入控制台中间，它会说一半是透明的nt:SOK，我已经整理好了。请看我更改的答案。祝你的项目好运！谢谢你的提示，很抱歉我迟了接受答案。我需要时间来研究代码。如果我还有其他问题，将来会发布：）