Html 当alpha=0时，画布会损坏rgb

我正在使用HTML画布投影图像。当我试图操纵图像数据的Alpha通道时，我发现只要它归零，像素中的其他值就会改变。即使设置为较低的数值，它们似乎也会发生变化。从控制台执行此操作

canvas=document.getElementById('canvasid')
ctx=canvas.getContext('2d')
mydata=ctx.getImageData(20,20,20,20)
for (var i=0;i<1600;i+=4){mydata.data[i+3]=0}
ctx.putImageData(mydata,20,20)
mydata=ctx.getImageData(20,20,20,20)
for (var i=0;i<1600;i+=4){mydata.data[i+3]=255}
ctx.putImageData(mydata,20,20)

canvas=document.getElementById（'canvasid'））
ctx=canvas.getContext（'2d'）
mydata=ctx.getImageData（20,20,20,20）
对于（var i=0；i当您将完全透明的像素写入画布（alpha==0）时，浏览器会自动将r、g、b值填充为零

因此，您的第一个putImage使用rgba（0,0,0,0）填充

当您再次获取这些像素的图像并将透明度更改为255（完全不透明）时，您拥有rgba（0,0,0255）

这是黑色的rgb

这就是为什么你的代码会产生黑色像素

如果要恢复原始像素，可以使用原始mydata（无需使用另一个getImageData重新蚀刻）putImageData。
当涉及alpha通道和画布时，webkit浏览器中存在几个问题（可能还会闪烁）。下面是一个示例

markE回答的可能是实际发生的情况，但不是应该发生的情况。alpha通道的整个要点是RGB值保持不变（以及避免手动颜色混合等）

Webkit浏览器需要预先乘以该值（在浏览器中合成时），但其结果似乎“泄漏”到画布的位图中，而它不应该这样做

更改alpha通道时，您正确地期望值保持不变。这是一个错误，您应该将其报告给Chromium团队（编辑：立即）

可能的解决办法

我能想到的唯一解决方法是将原始图像数据保留为单独的缓冲区，并将数据从源缓冲区复制到目标缓冲区，同时更改alpha通道

当然，如果您需要同时更新RGB/像素数据，您将返回到之前的相同情况，除非您愿意仅为屏幕外缓冲区更新像素（RGB）-这可以通过使用32位类型的阵列缓冲区屏蔽alpha通道来完成（性能会降低）.
谢谢你的帮助。我有其他理由保留原稿。我只是用未屏蔽的alpha通道保存画布并从中获取ImageData，然后将alpha和putImageData设置到我正在显示的画布。是的，这是意外的行为，不应该发生。顺便说一句，除了Chrome之外，IE11和你是对的，请看我对答案的评论。