更改彩色圖像，但並不在畫布

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);