Algorithm 如何仅绘制>；0%alpha和画布中的自定义颜色？
我想为png图像和其他形状做一个良好的性能命中测试。我真的不在乎它们是什么形状，因为使用这种技术在检查（而不是设置）时没有性能问题 我打算在一个辅助画布中收集屏幕上的所有图像，只是为了进行点击测试。对于每一幅画的图像，我将创建一种新的颜色，并将其附加到该特定图像上。然后我把它们都画在画布上，每个图像都有不同的填充颜色 当我点击一个像素（x，y）时，它会得到颜色（r，g，b）。每种颜色都映射到一个图像，所以我点击图像时没有任何错误（我不会浪费时间去查找点击的内容） 我知道它将被限制为256*256*256=16777216个项目，因为这些都是颜色，但我认为现在不会有问题 因此，我真正需要的是知道如何将这些填充颜色放置在二次画布上，二次画布仅基于每个图像的可见像素 更新 正如你在右边看到的，这是命中测试图。因此，如果我点击黑色阴影（c），我立即知道我点击了蓝色框，没有任何其他计算 一个改进是缓存alpha数据。还可以为每个图像实例重用相同的alpha数据（我们必须注意缩放和旋转…）Algorithm 如何仅绘制>；0%alpha和画布中的自定义颜色？,algorithm,canvas,hit,Algorithm,Canvas,Hit,我想为png图像和其他形状做一个良好的性能命中测试。我真的不在乎它们是什么形状，因为使用这种技术在检查（而不是设置）时没有性能问题 我打算在一个辅助画布中收集屏幕上的所有图像，只是为了进行点击测试。对于每一幅画的图像，我将创建一种新的颜色，并将其附加到该特定图像上。然后我把它们都画在画布上，每个图像都有不同的填充颜色 当我点击一个像素（x，y）时，它会得到颜色（r，g，b）。每种颜色都映射到一个图像，所以我点击图像时没有任何错误（我不会浪费时间去查找点击的内容） 我知道它将被限制为256*25
谢谢以下是如何对画布图像的不透明像素进行颜色遮罩 请确保将“PutYourImageHere.png”替换为您自己的图像url
<!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>
正文{背景色：象牙；}
画布{边框：1px纯蓝色；}
$（函数（）{
var img=新图像（）；
img.onload=函数（）{
var-red=255；
var蓝=0；
绿色变量=0；
var canvasCopy=document.getElementById（“canvasCopy”）；
var ctxCopy=canvasCopy.getContext（“2d”）；
var c=document.getElementById（“画布”）；
var ctx=c.getContext（“2d”）；
ctx.drawImage（这个，0,0）；
var imgData=ctx.getImageData（0,0，c.宽度，c.高度）；
对于（var i=0；i