Javascript 如何根据动态变化的百分比值为图像着色？

我有一个图像，我想根据表示百分比的动态变化值填充一些颜色，例如，如果该值为50%，则图像的一半应着色

---

如何使用JavaScript实现这一点（可以使用jQuery）？

您可以通过使用

clip

CSS属性和一点添加的标记为未显示的背景色提供一个底层容器来实现这一点

摘要 在图像下方放置一个元素用于人造颜色填充，并设置其尺寸和位置以匹配图像。然后使用JavaScript根据需要更改图像元素的

clip

值（当然，您可以单独控制每个偏移，例如左、下）来动态剪裁图像，从而显示基本颜色

注意：为了具体实现您的愿望，您可以更改基础元素，以包含另一个适合您需要的图像（即空桶的顶部图像和满桶的底部图像）

实施 在本例中，滑块用于触发值更改

加成

风格

#滑块，
#形象,，
#底层{
/*绝对定位对于剪裁元素（#图像）是必需的*/
位置：绝对位置；
左：50px；
宽度：500px；
}
#形象,，
#底层{
顶部：100px；
高度：207px；
}
#形象{
/*初始剪辑状态*/
剪辑：rect（自动，自动，自动，500px）；
}
#滑块{
顶部：50px；
}
#底层{
背景色：#4C76A5；
}

功能

var img=document.getElementById（'image'）；
var sld=document.getElementById（'slider'）；
sld.addEventListener（'change'，函数（e）{
//获取滑块值
var val=e.SRCELENT.value；
//计算将绝对长度值传递给剪辑特性的百分比
var perc=img.width/100*val；
//相应地设置图像的左偏移剪辑
img.style.clip='rect（自动，自动，自动，'+perc+'px'）；
});

现场演示

工具书类

---

图像应具有50%的颜色？或者图像应该是半彩色的（左边是彩色的，右边是灰色的）？在我的例子中，它的桶是我想按照百分比填充的，所以如果它是50%，那么它应该是下半部分填充，但我想知道是否也可以这样做，即从左到右或从左到右。如果我的答案解决了您的问题，请勾选我接受的答案，谢谢。