更改彩色图像，但不要在Canvas中更改背后的图像

Question

我在画布上有2张图像：

你可以看到这是2图像透明 在画布中它将显示如下

我想改变颜色＆＃39; Car＆＃39;只是。怎么做？

我使用dataImage来改变颜色，但它也改变了背后的图像

我的代码：

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