Canvas 设置形状的2个点的动画，以跟随鼠标悬停

我有一个向量中的简单形状，我想只对形状的2个顶点设置动画，以跟随鼠标在悬停时的水平移动。 我想在我的网站上发布html5画布。 有人能帮助我理解如何做到这一点（可能很容易）？ 谢谢大家!

Nik

这是一个简单的过程：

在画布上侦听

mousemove

事件

清除画布并重新绘制与鼠标位置x对齐的图像

下面是一个示例，让您在画布元素上通过左耳水平拖动Pikachu：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var$canvas=$（“#canvas”）；
var canvasOffset=$canvas.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
var-imgLeft=3；
var imgTop=100；
var img=新图像（）；
img.onload=启动；
img.src=”https://dl.dropboxusercontent.com/u/139992952/multple/pikachu.png";
函数start（）{
抽签（0）；
$（“#canvas”）.mousemove（函数（e）{handleMouseMove（e）；}）；
}
函数图（x）{
ctx.clearRect（0,0，cw，ch）；
ctx.drawImage（img、x-imgLeft、imgTop）；
}
功能手柄移动（e）{
//告诉浏览器我们正在处理此事件
e、 预防默认值（）；
e、 停止传播（）；
var mouseX=parseInt（e.clientX-offsetX）；
抽签（mouseX）；
}

body{背景色：象牙；}
#画布{边框：1px纯红；}

移动鼠标以移动皮卡丘的耳朵