Html5画布覆盖

是否有一个很好的解决方案来绘制带有画布覆盖颜色的位图

我要做的是为所有非透明像素绘制一个具有唯一颜色的位图。 我没有找到任何解决办法，它可能对我有用

谢谢

一种方法是循环遍历每个像素，并将r/g/b值更改为所需的值。跳过alpha值只会将不透明像素更改为所需的颜色

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    image = document.getElementById("testImage");

ctx.drawImage(image,0,0);

var imgd = ctx.getImageData(0, 0, 128, 128),
    pix = imgd.data,
    uniqueColor = [0,0,255]; // Blue for an example, can change this value to be anything.

// Loops through all of the pixels and modifies the components.
for (var i = 0, n = pix.length; i <n; i += 4) {
      pix[i] = uniqueColor[0];   // Red component
      pix[i+1] = uniqueColor[1]; // Green component
      pix[i+2] = uniqueColor[2]; // Blue component
      //pix[i+3] is the transparency.
}

ctx.putImageData(imgd, 0, 0);

// Just extra if you wanted to display within an img tag.
var savedImageData = document.getElementById("imageData");
savedImageData.src = canvas.toDataURL("image/png"); 

var canvas=document.getElementById（“canvas”），
ctx=canvas.getContext（“2d”），
image=document.getElementById（“testImage”）；
ctx.drawImage（图像，0,0）；
var imgd=ctx.getImageData（0,0,128,128），
pix=imgd.data，
uniqueColor=[0,0255]；//例如，蓝色可以将此值更改为任何值。
//循环所有像素并修改组件。
对于（变量i=0，n=pix.length；i

一种方法是循环遍历每个像素并将r/g/b值更改为所需的值。跳过alpha值只会将不透明像素更改为所需的颜色

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    image = document.getElementById("testImage");

ctx.drawImage(image,0,0);

var imgd = ctx.getImageData(0, 0, 128, 128),
    pix = imgd.data,
    uniqueColor = [0,0,255]; // Blue for an example, can change this value to be anything.

// Loops through all of the pixels and modifies the components.
for (var i = 0, n = pix.length; i <n; i += 4) {
      pix[i] = uniqueColor[0];   // Red component
      pix[i+1] = uniqueColor[1]; // Green component
      pix[i+2] = uniqueColor[2]; // Blue component
      //pix[i+3] is the transparency.
}

ctx.putImageData(imgd, 0, 0);

// Just extra if you wanted to display within an img tag.
var savedImageData = document.getElementById("imageData");
savedImageData.src = canvas.toDataURL("image/png"); 

var canvas=document.getElementById（“canvas”），
ctx=canvas.getContext（“2d”），
image=document.getElementById（“testImage”）；
ctx.drawImage（图像，0,0）；
var imgd=ctx.getImageData（0,0,128,128），
pix=imgd.data，
uniqueColor=[0,0255]；//例如，蓝色可以将此值更改为任何值。
//循环所有像素并修改组件。
对于（var i=0，n=pix.length；我以前没有做过，但我认为XOR操作可以做到（10年前用XOR和Java小程序做过）…搜索XORI以前没有做过，但我认为XOR操作可以做到（10年前用XOR和Java小程序做过）…搜索XORyeap。我尝试过这种方法，但它太小了，无法满足我的需要。@webshaker你说的太小是什么意思？上面只使用了一个示例图像。oups太慢了。对不起。事实上，我将解释我要做什么。我正在制作一个编辑器。我希望能够在屏幕上选择一个精灵。我已经使用spr周围的正方形进行了检测但是它不够精确。我喜欢将每个具有特定颜色的精灵绘制到隐藏的缓冲区中，以便找到所选的确切精灵。啊，好的，我现在明白了。是的，这种方法肯定是一种较慢的方法。是的：）但是，阅读你的消息，我发现了一个很酷的解决方案。我先检查矩形，然后我把点击的像素读入精灵的位图（ungGeTimaGeDATA），如果它是透明的，我认为精灵没有被选中。我还没有完成，但它可能会解决我的问题。我试过这个方法，但它太小了，不适合我的需要。@webshaker你说的太小是什么意思？上面只是使用了一个示例image.oups太慢了抱歉。事实上，我会解释我要做什么。我正在做一名编辑。我想能够在屏幕上选择一个精灵。我用精灵周围的正方形做了一个探测，但不够精确。我喜欢将每个具有特定颜色的精灵绘制到一个隐藏的缓冲区中，以便找到所选的确切精灵。啊，好的，我现在明白了，是的，这种方法确实是一种较慢的方法。是的：）但最后，阅读您的消息，我找到了一个很酷的解决方案。我首先检查矩形，然后我会把点击的像素读入雪碧位图（ungGeTimaGeDATA），如果它是透明的，我认为没有选择精灵。我还没做完，但它可能会解决我的问题