Javascript 眼睛跟随光标定位？

我正在尝试使用Javascript创建一个跟随鼠标在页面上移动的东西。我希望它是米老鼠，我希望它的眼睛能跟着老鼠在眼球周围移动。。。这是我到目前为止所掌握的代码（从网络上的各个地方收集到的代码，感谢编写了哪一部分的人）：

var jseyesimg=”http://oi67.tinypic.com/frnys.jpg";
var jseyeimg=”http://oi63.tinypic.com/nxwa5u.jpg";
var jseyeslink=”http://www.javascriptkit.com";
var jseyeso=null，jseye1=null，jseye2=null；
var standardbody=（document.compatMode==“CSS1Compat”）？document.documentElement:document.body//创建对跨doctype的公共“body”的引用
函数jseyesobj（id）{
变量i，x；
x=文件[id]；
如果（！x&&document.getElementById）x=document.getElementById（id）；
对于（i=0；！x&&i，我个人认为使用canvas进行类似的操作更有意义

我在下面创建了一个带注释的示例。该示例不使用图像，因此您必须自己完成该部分，这是有关画布API（包括如何绘制图像）信息的良好资源

数学可以分解为：

计算鼠标与眼睛中心之间的角度
使用三角学找到眼睛圆周上该角度的点。由于米奇的眼睛是椭圆而不是完美的圆，因此其半径随角度而变化。有关详细信息，请参阅
减去瞳孔半径（再次使用从点2开始的trig，因为半径根据角度而变化）
注意：按“运行代码片段”查看示例工作


const canvas=document.querySelector（'canvas'）；
const context=canvas.getContext（'2d'）；
常数TWOPI=2*Math.PI；
//将画布调整为可用的全宽/全高
//注意：此解决方案没有响应性
canvas.width=内部宽度；
canvas.height=内部高度；
//眼睛对象将负责保持状态并渲染自己
班眼{
构造函数（x，y）{
这个.x=x；
这个。y=y；
这个宽度=40；
这个高度=80；
瞳孔={x:0，y:0，宽度：10，高度：20}；
}
画（）{
常数{x，y}=这个；
context.save（）；
语境。翻译（x，y）；
这个.drawOutline（）；
这个
restore（）；
}
绘图大纲（）{
const{width，height}=这个；
context.beginPath（）；
椭圆（0，0，宽度，高度，0，0，TWOPI）；
stroke（）；
}
抽签{
常数{x，y，宽度，高度}=这个瞳孔；
context.beginPath（）；
椭圆（x，y，宽度，高度，0，0，TWOPI）；
context.fill（）；
}
轨迹（对象）{
常数{x，y，宽度，高度，瞳孔}=这个；
//找到鼠标和眼睛中心之间的角度
常量xDiff=（x-object.x）；
常数yDiff=（y-object.y）；
const angle=Math.atan2（yDiff，xDiff）-Math.PI；
如果（！isNaN（角度））{
//计算眼睛圆周上的点
常数cX=（宽度*数学cos（角度））；
常数cY=（高度*数学sin（角度））；
//计算瞳孔圆周上的点
常数pX=瞳孔宽度*数学cos（角度）；
const pY=瞳孔高度*数学sin（角度）；
//将瞳孔定位在眼睛边缘，减去瞳孔半径
瞳孔x=cX-pX；
瞳孔y=cY-pY；
}
}
}
//鼠标移动时更新鼠标位置
window.addEventListener（'mousemove'，e=>{
mouse.x=e.clientX；
mouse.y=e.clientY；
});
常数鼠标={x:0，y:0}；
常量左眼=新眼（100100）；
常数右眼=新眼（200100）；
//在每一次勾选中，用一个新的位置重新画出眼睛
函数tick（）{
//透明帆布
clearRect（0，0，canvas.width，canvas.height）；
//跟踪鼠标并绘制左眼
leftEye.track（鼠标）；
leftEye.draw（）；
//复制左眼瞳孔的状态
rightEye.poud.x=leftEye.poud.x；
rightEye.瞳孔.y=leftEye.瞳孔.y；
//rightEye.track（鼠标）；//或将其用于独立的眼睛跟踪
右眼；
requestAnimationFrame（勾号）；
}
//启动动画循环
勾选（）；
body{margin:0；}
谢谢！有没有办法将这些眼睛放在正确的位置的图像上方？我在编程方面非常糟糕，感觉这样会更简单！：d提高编程水平的唯一方法是进行实验，所以我恐怕把这个留给你！为你指出正确的方向；使用canvas API，你可以将米奇的图像放在眼前的画布上，有关更多信息，请参见MDN上的此页：。或者，您可以使用CSS将
元素的眼睛放在HTML
元素上。我已经花了大约一个小时的时间来处理它，我想我正在慢慢地弄明白。非常感谢您的帮助：）
<script>
var jseyesimg="http://oi67.tinypic.com/frnys.jpg";
var jseyeimg="http://oi63.tinypic.com/nxwa5u.jpg";
var jseyeslink="http://www.javascriptkit.com";

var jseyeso=null, jseye1=null, jseye2=null;
var standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes

function jseyesobj(id) {
var i, x;
x= document[id];
if (!x && document.getElementById) x= document.getElementById(id);
for (i=0; !x && i<document.forms.length; i++) x= document.forms[i][id];
return(x);
}

function jseyesmove(x, y) {
var ex, ey, dx, dy;
if (jseyeso && jseye1 && jseye2 && jseyeso.style) {
ex=jseyeso.offsetLeft+46; ey=jseyeso.offsetTop+58;
dx=x-ex; dy=y-ey;
r=(dx*dx/49+dy*dy/289<1) ? 1 : Math.sqrt(49*289/(dx*dx*289+dy*dy*49));
jseye1.style.left= r*dx+36.5+'px'; jseye1.style.top= r*dy+44+'px';
ex+=56; dx-=56;
r=(dx*dx/49+dy*dy/289<1) ? 1 : Math.sqrt(49*289/(dx*dx*289+dy*dy*49));
jseye2.style.left= r*dx+92.5+'px'; jseye2.style.top= r*dy+44+'px';
}
}

function jseyes() {
var img;
var x, y, a=false;

if (arguments.length==2) {
x= arguments[0];
y= arguments[1];
a= true;
}

img= "<div id='jseyeslayer' style='position:"+
       (a ? "absolute; left:"+x+"; top:"+y : "relative")+
       "; z-index:5; width:150; height:150 overflow:hidden'>"+
     "<div id='jseye1' style='position:absolute; left:130; top:44; z-index:6; width:21; height:29'>"+
       "<img src='"+jseyeimg+"' width=21 height=29 onClick=\"location.href='"+jseyeslink+"'\">"+
     "</div>"+
     "<div id='jseye2' style='position:absolute; left:160; top:44; z-index:6; width:21; height:29'>"+
       "<img src='"+jseyeimg+"' width=21 height=29 onClick=\"location.href='"+jseyeslink+"'\">"+
     "</div>"+
     "<img src='"+jseyesimg+"' width=300 height=300 onClick=\"location.href='"+jseyeslink+"'\">"+
 "</div>";
document.write(img);
jseyeso=jseyesobj('jseyeslayer');
jseye1=jseyesobj('jseye1');
jseye2=jseyesobj('jseye2');

document.onmousemove=jseyesmousemove;
}

function jseyesmousemove(e) {
    var mousex=(e)? e.pageX : event.clientX+standardbody.scrollLeft
    var mousey=(e)? e.pageY : event.clientY+standardbody.scrollTop
jseyesmove(mousex, mousey);
//return(false);
}
</script>