如何仅在画布中使用自定义颜色绘制 > 0% alpha 的可见像素？答案

【问题标题】：How to draw only the visible pixels which are >0% alpha with a custom color in canvas?如何仅在画布中使用自定义颜色绘制 > 0% alpha 的可见像素？
【发布时间】：2013-02-15 03:33:06
【问题描述】：

我想对 png 图像和其他形状进行良好的性能命中测试。我真的不在乎它们是什么形状，因为使用这种技术在检查（而不是设置）时不会出现性能问题。

我打算将屏幕上的所有图像收集到辅助画布中，仅用于命中测试。对于绘制的每个图像，我将创建一个附加到该特定图像的新颜色。然后我把它们都画在画布上，每张图片都会有不同的填充颜色。

当我点击一个像素 (x, y) 时，它将获得颜色 (r, g, b)。每种颜色都映射到一个图像，因此我可以毫无错误地点击该图像（我不会浪费在查找该点击所击中的内容上）。

我知道它将被限制为 256*256*256=16 777 216 件，因为这些都是颜色，但我认为现在不会有问题...

所以我真正需要的是知道如何将这些填充颜色放在仅基于每个图像的可见像素的辅助画布上。

更新

正如您在右侧看到的那样，它是命中测试地图。因此，如果我点击黑色阴影 (c)，我会立即知道我点击了蓝色框，无需任何其他计算。

其中一项改进是缓存 alpha 数据。还为每个图像实例重用相同的 alpha 数据（我们必须注意缩放和旋转......）。

谢谢

【问题讨论】：

其他碰撞检测测试有什么问题？
碰撞检测不会检查每个图像的每个像素是否被击中？对于每个大约 1000 像素的 > 1000 个图块来说，这太慢了。（每次鼠标悬停 1000000 次检查将非常滞后）。我什至不知道我的想法是否可行，因为我在 15 分钟前就想到了......
active.tutsplus.com/sessions/collision-detection-and-reaction
嗯，这似乎是为 Flash 制作的。我需要的是一种在画布中为 html+javascript 绘制图像填充区域的方法

标签： algorithm canvas hit

【解决方案1】：

下面介绍了如何对画布图像的不透明像素进行颜色遮罩。

确保将“PutYourImageHere.png”替换为您自己的图片网址。

<!doctype html>
<html>
<head>

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid blue;}
</style>

<script>
    $(function(){

        var img=new Image();
        img.onload=function(){

          var red=255;
          var blue=0;
          var green=0;

          var canvasCopy=document.getElementById("canvasCopy");
          var ctxCopy=canvasCopy.getContext("2d");

          var c=document.getElementById("canvas");
          var ctx=c.getContext("2d");
          ctx.drawImage(this,0,0);

          var imgData=ctx.getImageData(0,0,c.width,c.height);

          for (var i=0;i<imgData.data.length;i+=4)
            {
                if(imgData.data[i+3]>0){
                    imgData.data[i]=red;
                    imgData.data[i+1]=green;
                    imgData.data[i+2]=blue;
                    imgData.data[i+3]=255;
                }
            }
          ctxCopy.putImageData(imgData,0,0);
        }
        img.src = "PutYourImageHere.png";

    }); // end $(function(){});
</script>

</head>

<body>

    <canvas id="canvas" width="300" height="300"></canvas>
    <canvas id="canvasCopy" width="300" height="300"></canvas>

</body>
</html>

【讨论】：

我认为它会起作用的！我现在无法测试它，但它似乎正是我想要的。我不知道 imageData 的结构是这样的 [pixels1.red, pixel1.green, pixel1.blue, pixel2.alpha, pixel2.red].. 你知道任何链接可以更深入地解释这个主题吗？谢谢（：
现在刚刚进行了肮脏的测试，效果很好！非常非常感谢！ jsfiddle.net/Tj5qG/1
很高兴我能帮上忙。一些优化提示： --- 1. 将 imgData.data 缓存为 var data=imgData.data, --- 2. 您可以抓取画布的一小部分而不是整个内容： var myArea=ctx.getImageData(X, Y,Width,Height), --- 3. 可能的最佳优化：计算图像的边界框 (BB) 并测试 BB 的碰撞，因此如果没有碰撞，您可以完全避免碰撞测试！
好吧，我想你没有很好地理解我的想法。我将在我的问题中发布一张图片，解释它是如何工作的..