为不同的颜色变化重新绘制图像精灵答案

【问题标题】：Repatterning image sprites for different color variations为不同的颜色变化重新绘制图像精灵
【发布时间】：2012-11-11 19:13:57
【问题描述】：

让我再简化一下，

这个座位图像是尺寸为 150x54 的 PNG 格式，当我在画布上渲染它并获取它的图像数据时，我可以使用像素操作轻松地将其像素更改为 RGB 空间。现在这里我只更改 alpha > 0 的像素。所以对于颜色改变它的工作正常。

现在回到重点我想在座位上绘制图案而不是颜色，可以说我想绘制花朵图案，现在我想知道如何仅在座位的非透明区域上绘制？我知道我可以使用画布的 createPattern 函数，但它会渲染所有我不想要的 150x54 像素。

有什么想法可以做到这一点吗？

我正在用 HTML5 创建自行车视图，我想用不同的颜色自定义自行车。

我已经使用 HTML 画布以及循环不同部分的不同图像来实现它。现在客户端需要渲染图案而不是颜色，所以我需要知道如何最好地在适当的部分渲染图像图案而不是颜色x,y 和大小。

在色彩渲染中，我使用像素操作并更改每个像素的 RGB 值，但对于图案我不知道如何使用 RGB 值更改图案图像数据？

知道如何做到这一点吗？或者有什么替代方法？

【问题讨论】：

【解决方案1】：

您可以使用复合操作将绘图操作定位到某些像素。

例如，见

如果您选择“source-atop”，则仅在下面有底层文本的地方绘制球。

这样，您可以仅在下方有鞍形非 alpha 像素的地方绘制目标图案。

我不确定 createPattern() 是否支持合成。如果它不这样做，那么您可以手动在所有图像上重复 drawImage()。

【讨论】：