Repatterning图像精灵为不同的颜色变化

Question

让我简化一下，

这个座位图像是PNG格式，尺寸为150x54，当我在画布上渲染它并获得其图像数据时，我可以使用像素操作轻松地将其像素更改为RGB空间。现在，我只更改具有alpha＆gt;的像素。因为颜色改变了它的工作状态。

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

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

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

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

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

知道如何做到这一点？或者任何其他方式？

Answer 1

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

例如，请参阅

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

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

这样，您可以将图案定位到仅在下方有马鞍非alpha像素的位置绘制。

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