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

Question

让我再简化一下，

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

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

任何想法如何做到这一点？

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

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

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

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

Answer 1

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

例如，参见

http://mrcoles.com/blog/canvas-composite-operations-demo-animation/

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

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

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