html5中css改变颜色,帆布 - 使用HTML5 / CSS / JS的图像改变颜色？(Canvas - Change co

有没有办法在Flash / ActionScript来改变图像的颜色很像只使用HTML5 / CSS / JavaScript的？

下面是在Flash的例子： http://www.kirupa.com/developer/actionscript/color.htm 编辑：这是我要复制的过程。

我试图完成这样的(颜色变化方面，保持光照和阴影)： http://www.acura.com/ExteriorColor.aspx?model=TL ，无负载和每次更换一个新的形象; 我希望能够简单地改变色调(即做一个纯粹的HTML5 / CSS / JS方法)。 编辑：这是我想达到的目的，而不是过程的结果。

基本上，我想要改变图像的调色板/音调，同时保留所述图像的其他方面(如梯度，照明等)。 我已经得到接近，但不够紧密; 我已经得到的地方，我使用的图像掩模和复合材料，其在所述原始图像(有点像透明图像叠加)的点。 下面是一些示例代码(请注意，这只是一个片段，因此它可能会或可能无法正常工作;我只是显示的示例代码，所以你得到什么，我试图做一个想法)：

red

green

foo = {};

foo.ctx = jQuery('#canvas')[0];

foo.ctx_context = foo.ctx.getContext('2d');

foo.mask = jQuery('#mask')[0];

foo.img = new Image();

foo.img_path = '/path/to/image_mask.png'; // 100px x 100px image

foo.changeColor = function(rgba){

foo.ctx_context.clearRect(0, 0, 100, 100);

foo.ctx_context.fillStyle = 'rgba(' + rgba + ')';

foo.ctx_context.fillRect(0, 0, 100, 100);

foo.ctx_context.globalCompositeOperation = 'destination-atop';

foo.ctx_context.drawImage(foo.img, 0, 0);

foo.ctx_context.css({'background-image': "url(" + foo.ctx.toDataURL("image/png") + ")"});

};

jQuery("button").click(function(){

foo.changeColor(jQuery(this).attr('data-rgba'));

});

使用这种方法的主要问题是，图像看起来真的很平淡。 还有别的东西丢失，或者我使用(这是一个纯白色不规则形状的图像)的面具，是错误的做法。