javascript - 更改彩色图像但不更改 Canvas 后面的图像

Question

我在 Canvas 上有 2 个图像，如下所示:

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

我只想更改“汽车”的颜色。该怎么做？

我使用 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);