在 HTML5 中设置透明色答案

【问题标题】：Setting a transparent color in HTML5在 HTML5 中设置透明色
【发布时间】：2011-01-02 21:31:25
【问题描述】：

是否可以为 HTML5 中加载的图像设置透明颜色？

我会寻找类似于 SDL 中可用的 setColorKey() 函数的东西。这将用于轻松地从我将使用的一些精灵表中删除背景。

【问题讨论】：

为什么不首先创建具有透明背景的图像？
这绝对有可能，但我只是好奇
好吧，我要问自己的问题是：为什么要在每个客户端上的每个页面加载重复处理，而不是在服务器上只执行一次？
“即时”执行此操作的一个原因是，如果您想对精灵使用不同的调色板
@JaniHartikainen 我并不是说没有充分的理由，我只是说确保你有充分的理由不做服务器端甚至离线。如果您想动态处理图像的整个调色板，那么 SVG 可能是一个更好的起点。

【解决方案1】：

没有非常直接的方法可以做到这一点，但您可以使用<canvas> 标签来做到这一点。

使用drawImage 在画布中绘制您的图像，然后使用getImageData 和putImageData 对其执行像素操作。

【讨论】：

【解决方案2】：

没有用于此的内置函数。如果这不需要是动态的，那么您可以从原始图像中删除颜色并使这些区域透明。然后将图像放在一个 div 中，该 div 具有您刚刚从图像中删除的背景颜色。之后，当您将鼠标悬停在图像上时，您可以更改 div 的背景颜色。

如果这听起来不错，并且您需要一些入门代码，请告诉我。

【讨论】：