Image 使用kineticjs更改图像对象颜色

我正在尝试使用kineticjs将图像转换为另一种颜色，实际上我的图像将位于一个图层上，也是一个png图层。我可以只更改图像对象的颜色吗？任何帮助都将非常有用

您可以使用合成将不透明像素替换为新颜色

特别是，

source-top

合成将用您绘制的任何颜色替换所有现有的不透明像素

KineticJS目前不提供现成的合成功能，但您可以轻松使用html5画布元素进行合成，然后将该元素用作Kinetic.image元素的图像源

下面是示例代码和演示：

var阶段=新的动力学阶段({
容器：'容器'，
宽度：350，
身高：350
});
var layer=新的动能层（）；
阶段。添加（层）；
var canvas=document.createElement（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var kImage；
var img=新图像（）；
img.onload=启动；
img.src=”https://dl.dropboxusercontent.com/u/139992952/multple/flower.png";
函数start（）{
cw=画布宽度=图像宽度；
ch=画布高度=图像高度；
ctx.drawImage（img，0,0）；
kImage=新动能图像({
图片：画布，
宽度：img.width，
高度：img.height，
真的，
});
图层。添加（kImage）；
layer.draw（）；
document.getElementById（'makeGreen'）。onclick=function（）{
ctx.globalCompositeOperation='source-top'；
ctx.fillStyle='lightgreen'；
ctx.fillRect（0,0，cw，ch）；
layer.draw（）；
};
document.getElementById（'makeOriginal'）。onclick=function（）{
ctx.globalCompositeOperation='source-over'；
ctx.drawImage（img，0,0）；
layer.draw（）；
};
}

body{padding:20px；}
#容器{
边框：实心1px#ccc；
边缘顶部：10px；
宽度：350px；
高度：350px；
}

绿色
起初的

请更清楚地重申您的问题。：-）对不起，我不太清楚，实际上我正在画布上使用黑色png图像。用户可以从颜色托盘更改该图像的颜色，如果用户选择颜色，则图像将根据该颜色进行着色。在画布层部分可以有许多图像，只有特定的图像会反映更改。如果我理解…假设您已将black.png、red.png、blue.png等图像加载到新图像（）对象中：

var myBlueObject=new image（）；myBlueObject.src='blue.png'

，则可以使用

myImage.setImage（myBlueObject）更改任何动能.image的图像源感谢您的回复，我得到了一个示例站点，向您展示我想要的确切功能（图像及其颜色）。你可以在这里添加剪贴画，然后改变它的颜色。谢谢，这对我真的很有帮助。