Javascript 如何在画布上突出显示图像的一部分？

我的项目是通过指出手部图像的手指来捕获指纹。

当捕捉食指时，我希望高亮显示/设置动画，如下所示：

如何使用javascript或其他技术在画布中实现这一点

---

更新：我需要一个示例代码来在手指上上下移动一个条，以创建一种正在扫描fingter的感觉。以下是您大致需要采取的步骤的示例：

//获取对画布的引用。
//在这里，我将手动创建画布
var canvas=document.body.appendChild（document.createElement（“canvas”）；
canvas.width=canvas.height=200；
var ctx=canvas.getContext（“2d”）；
//动画特性
var animationStart=Date.now（）；
var animationDuration=1*1000；
//叠加图像
//在您的例子中，它将是一个IMG元素，但对于这个示例，我将使用画布
var overlayImage=document.createElement（“画布”）；
覆盖图像宽度=40；
叠加图像高度=100；
overlayImage.getContext（“2d”）.fillStyle=“蓝色”；
overlayImage.getContext（“2d”）.fillRect（0，0，overlayImage.width，overlayImage.height）；
//启动动画
请求动画帧（绘制）；
函数绘图（）{
//确定当前动画步骤
var currentTime=Date.now（）；
var animationProgress=Math.min（1，（currentTime-animationStart）/animationDuration）；
//绘制背景图像。
//在本例中，它将只是一个红色背景，但您可能会使用
ctx.globalAlpha=1；
ctx.fillStyle=“红色”；
ctx.fillRect（10,0,180,200）；
//绘制叠加图像
ctx.globalAlpha=0.4；
ctx.drawImage（叠加图像，80,30）；
//绘制叠加图像的高亮部分
ctx.globalAlpha=1；
ctx.drawImage（overlayImage，80,30，overlayImage.width，overlayImage.height*动画进度）；
//突出显示
//您可能需要在此处使用混合模式：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
如果（animationProgress！=1）{
ctx.fillStyle=“白色”；
ctx.globalAlpha=0.1；
对于（var i=1；i Hi，你能说得更具体一点吗？你想改变手指的颜色吗？指纹的颜色吗？你想得到指纹吗？或者你已经有了指纹吗？如果你想了解基本的方法：并且应该会得到大部分的方法。有一个关于基本动画的教程。@Barudar:可能是上下移动蓝色扫描仪的线条跟随手指的动作。是的，我想从一个人身上取指纹。@KawsarAhmed你需要指纹才能是真的吗？还是一些假的？因为，如果你想要真的，我认为这是一个完全不同的故事（我不知道怎么做）@Barudar：在手指上加上假覆盖物，让患者明白他/她需要将手指放在扫描仪上。