Canvas 如何将一个具有一定透明度的全白色png，部分重新着色？

我有这张png雪碧云片。我完全有能力分割精灵表，并将单个云放入画布上下文中。但是如果我想修改云的图像呢？ 如果我想在左边涂上黄色怎么办？有一些径向梯度。这些事情应该是可能的，对吧？其中，径向渐变仅影响白云像素，但影响程度与它们的透明程度相同。 这叫什么？我需要做什么？

这是一个调用，是的，它非常适用于Canvas2D API，它提供了一个具有几种不同模式的属性

这里是一个使用a的简单ES6示例，我们将在其上绘制一个径向梯度

（异步（）=>{
const ctx=c.getContext（'2d'）；
const clouds=getCloudsObjects（30）；
常数表=等待加载映像（'https://i.stack.imgur.com/Gvewl.png');
ctx.filter='blur（2px）'；
const cloud_grad=initGrad（‘黄色’、‘红色’）；
const sky_grad=initGrad（'300c46'，'green'）；
动漫（）；
函数anim（）{
ctx.clearRect（0，0，c.宽度，c.高度）；
forEach（updateandrawsprite）；
//仅在不透明像素上绘制，保留alpha信息
ctx.globalCompositeOperation='source-top'；
drawGrad（云梯度）；
如果（背景检查）{
//把一切都抛在脑后？
ctx.globalCompositeOperation='destination over'；
drawGrad（天空梯度）；
}
//重置gCO
ctx.globalCompositeOperation='source over'；
请求动画帧（anim）；
}
函数initGrad（col1，col2）{
常数梯度=ctx.createRadialGradient（0，c.高度，0，0，c.高度，c.宽度*1.6）；
渐变加色停止（0，col1）；
渐变加色停止（0.7，col2）；
返回梯度；
}
函数drawGrad（grad）{
ctx.fillStyle=梯度；
ctx.fillRect（0，0，c.宽度，c.高度）；
}
函数updateAndRawSprite（obj）{
obj.update（）；
ctx.drawImage（活页，obj.ox，obj.oy，obj.ow，obj.oh，obj.x，obj.y，obj.w，obj.h）；
}
函数getCloudsObjects（nbOfClouds）{
常数arr=[]；
常数W=64，
h=16，
w=16，
最大值=w/w；
for（设i=0；ic.width）
this.x=-this.w；
如果（此.y>c.高度）
this.y=-this.h；
如果（此.x<-此.w）
此.x=c.宽度；
如果（此.y<-此.h）
这.y=c.高度；
}
};
}
返回arr；
}
函数loadImage（url）{
返回新承诺（（res，rej）=>{
const img=新图像（）；
img.onload=e=>res（img）；
img.onerror=e=>rej（img）；
img.src=url；
});
}
})();
标签{
显示：块
}

绘制背景图
欢迎来到Stack Overflow，阅读然后重新编写您的问题，您可能会得到答案。由于已经有很长时间了，我想做类似的事情，尽管它仍然非常不完整，颜色比例应该重新检查……哇。这太神奇了。谢谢分享。我现在才回到这个话题。我非常感激。这么多的洞察力