在getImageData的Load事件上

Question

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

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

现在它在鼠标上显示了Opague区域和透明区域的结果。

我想以某种方式在负载上可视化这个矩形，其中网格覆盖图像和不透明的盒子，而透明的盒子有不同的颜色，如oppaque，绿色透明是红色。我可能需要加载功能吗？但它应该怎么样？

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

这是我目前的进展：

https://jsfiddle.net/kdichev/Lnp3k5re/

Answer 1

由于您可能希望游戏控制台仍然显示，您可以使用缩小的alpha（globalAlpha）绘制100x100的盒子。

以下是示例代码和演示：

＆＃13;

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var boxWidth=100;
var boxHeight=100;
var boxRows=Math.ceil(865/boxHeight);
var boxCols=Math.ceil(1152/boxWidth);
var boxes=new Array(boxRows*boxCols);
for(var i=0;i<boxes.length;i++){boxes[i]=false;}

var img=new Image();
img.onload=start;
img.crossOrigin='anonymous';
img.src="http://i.imgur.com/RrHayx8.png?1";
function start(){

  ctx.drawImage(img,0,0);

  var d=ctx.getImageData(0,0,cw,ch).data;

  for(var i=0;i<d.length;i+=4){
    if(d[i+3]>200){
      var px=parseInt(i/4);
      var pixelY=parseInt(px/cw);
      var pixelX=px-pixelY*cw;
      var boxX=parseInt(pixelX/boxWidth);
      var boxY=parseInt(pixelY/boxHeight); 
      boxes[boxY*boxCols+boxX]=true;
    }
  }

  ctx.globalAlpha=0.25;
  ctx.fillStyle='red';

  for(var i=0;i<boxes.length;i++){
    var y=parseInt(i/boxCols);
    var x=i-y*boxCols;
    if(boxes[i]==true){
      ctx.fillRect(x*boxWidth,y*boxHeight,boxWidth,boxHeight);        
    }
  }

  ctx.globalAlpha=1.00;
  ctx.fillStyle='black';

}

＆＃13;

body{ background-color: ivory; }
#canvas{border:1px solid red;}

＆＃13;

<canvas id="canvas" width=1152 height=865></canvas>

＆＃13;

＆＃13;

＆＃13;