更改彩色图像，但并不在画布

Question

变化背后的图像我在画布2图像是这样的：

你可以看到这是2图像透明 在画布上，它会显示像这

我想改变颜色“汽车”只。如何做到这一点？

我用 - 图象改变颜色，但它改变形象背后也

我的代码：

context.drawImage(imageObj,this.top,this.left,this.width,this.height); 

var imgData=context.getImageData(this.top, this.left, this.width, this.height); 
    dataImg=imgData.data; 
    for (var i=0;i<dataImg.length;i+=4) 
    { 
     dataImg[i]= hexToRgb(this.color).r |dataImg[i+2]; 
     dataImg[i+1]=hexToRgb(this.color).g |dataImg[i+2]; 
     dataImg[i+2]=hexToRgb(this.color).b|dataImg[i+2]; 
     dataImg[i+3]= 255; 
    } 
    context.putImageData(imgData,this.top, this.left); 

请给我一些解决方案。 TY

Answer 1

您需要组成两个图像

context.drawImage(imageObj,this.top,this.left,this.width,this.height); 

不是前后改变图像的颜色。喜欢的东西：

//绘制背景

context.drawImage(img1, 0, 0); 

//创建你想要的颜色填充，用你的形象作为一个面具，增加背景

context.clearRect(this.top,this.left,this.width,this.height)); 
context.fillStyle = "#FF0000"; 
context.fillRect(this.top,this.left,this.width,this.height)); 
context.globalCompositeOperation = 'destination-atop'; 
context.drawImage(img2, 0, 0);