Image HTML5如何在画布中绘制透明像素图像

我正在使用rgb像素数据绘制图像。我需要为该图像设置透明背景色。我可以将alpha设置为透明图像的值是多少？或者有其他解决办法吗

0的alpha值表示像素完全透明。255的alpha值表示像素完全不透明，表示像素没有透明度

如果您的图像部分是完全透明的（alpha为0），则使用什么作为RGB值并不重要，只要使用alpha为0即可。另一方面，我使用的一些较旧的windows程序做出了一个假设，例如左上角像素或右下角像素将用作透明度颜色。然后，当它遇到这个特定的RGB值时，它将循环遍历所有像素并将alpha设置为0

如果使用127的Alpha值，并且图像显示在另一个图像的顶部，则看起来两个图像是相同可见的，或者底部图像将50%的颜色渗透到顶部图像

---

如果要测试并查看将alpha应用于整个图像时的效果，请为alpha设置一个变量。

如果我了解您需要什么，您基本上希望将图像上的特定颜色变为透明。为此，您需要使用

getImageData

签出

下面是一些示例代码

var imgd = ctx.getImageData(0, 0, imageWidth, imageHeight),
    pix = imgd.data;

for (var i = 0, n = pix.length; i <n; i += 4) {
    var r = pix[i],
        g = pix[i+1],
        b = pix[i+2];

    if(g > 150){ 
        // If the green component value is higher than 150
        // make the pixel transparent because i+3 is the alpha component
        // values 0-255 work, 255 is solid
        pix[i + 3] = 0;
    }
}

ctx.putImageData(imgd, 0, 0);​

var imgd=ctx.getImageData（0，0，imageWidth，imageHeight），
pix=imgd.data；
对于（var i=0，n=pix.length；i 150）{
//如果绿色分量值大于150
//使像素透明，因为i+3是alpha分量
//值0-255有效，255为实心
pix[i+3]=0；
}
}
ctx.putImageData（imgd，0,0）；​

使用上述代码，您可以使用

如果（r==255&&g==0&&b==255）

我想您需要clearRect画布方法：

---

这将允许您将像素清除为透明（或任何其他RGBA颜色），而无需大惊小怪或像素操纵

相关：当我为所有像素的alpha设置0时，我的图像部分完全变为白色。在绘制像素图像后，我必须在mousemove事件中移动该图像。当我移动图像时，我可以看到图像周围的白色矩形。我需要避免这种情况。或者有没有办法单独移动图像而不是像素矩形？除了寻找rgb为255255（白色）的像素外，您必须执行上述操作。看看JSFIDLE，它创建了一个临时画布元素，并将结果绘制到该元素中。这就是你需要做的。您需要执行像素操作，并使用

putImageData

将数据放置在新画布上，这是您将移动的数据，而不是图像。在临时画布元素上绘制图像后，我使用了下面的代码，我的问题得到了解决。感谢您的帮助。var imgURL=tempCanvas.toDataURL（）；var myImage=新图像（）；src=imgURL；drawImage（myImage、xPos、yPos）；