Javascript 基于图像内部光标的移动眼睛

我对javascript/html5相当陌生。我有一个在堆栈溢出数据库中找不到的问题。我希望你们能帮我

我有一个图像

我希望眼睛根据光标位置在白色圆圈内移动。我已经计算出了光标的位置。我唯一搞不清楚的是如何实现图像而不是填充

这就是我目前得到的结果：

  function drawEye(eye) {
  bepaalCoordinaten(eye);

  // eye
  context.beginPath();
  context.arc(eye.centerX, eye.centerY, eye.radius, 0, Math.PI * 2);
  context.fillStyle = "#fff";
  context.fill();
  context.closePath();

  // iris
  context.beginPath();
  context.arc(eye.centerX + eye.pupilX, eye.centerY + eye.pupilY, eye.radius / 2, 0, Math.PI * 2);
  context.fillStyle = "#007";
  context.fill();
  context.closePath();

  // pupil
  context.beginPath();
  context.arc(eye.centerX + eye.pupilX, eye.centerY + eye.pupilY, eye.radius / 5, 0, Math.PI * 2);
  context.fillStyle = "#000";
  context.fill();
  context.closePath();

  context.restore();
}

// test if mouse is outside thing
// if it's outside, contain the eye inside the thing
var dx=eye.centerX-thing.cx;
var dy=eye.centerY-thing.cy;
var dist=Math.sqrt(dx*dx+dy*dy);
if(dist>(thing.radius-eye.radius)){
    // mouse is outside thing
    var angle=Math.atan2(dy,dx);
    // place the eye on the radius of the thing
    eye.centerX=thing.cx+(thing.radius-eye.radius)*Math.cos(angle);
    eye.centerY=thing.cy+(thing.radius-eye.radius)*Math.sin(angle);
}

有没有办法用上面列出的图像替换虹膜和眼睛

---

提前谢谢你们

有一种称为drawImage的方法：

var image_element = document.createElement('img');

image_element.src = "http://placehold.it/50x50.jpg";

image_element.onload = function() {
    context.drawImage(image_element, 10, 10);
}

你不能“移动”html5画布上绘制的任何东西。相反，您可以擦除整个画布并在其新位置重新绘制内容

在鼠标位置重新绘制眼睛：

  function drawEye(eye) {
  bepaalCoordinaten(eye);

  // eye
  context.beginPath();
  context.arc(eye.centerX, eye.centerY, eye.radius, 0, Math.PI * 2);
  context.fillStyle = "#fff";
  context.fill();
  context.closePath();

  // iris
  context.beginPath();
  context.arc(eye.centerX + eye.pupilX, eye.centerY + eye.pupilY, eye.radius / 2, 0, Math.PI * 2);
  context.fillStyle = "#007";
  context.fill();
  context.closePath();

  // pupil
  context.beginPath();
  context.arc(eye.centerX + eye.pupilX, eye.centerY + eye.pupilY, eye.radius / 5, 0, Math.PI * 2);
  context.fillStyle = "#000";
  context.fill();
  context.closePath();

  context.restore();
}

// test if mouse is outside thing
// if it's outside, contain the eye inside the thing
var dx=eye.centerX-thing.cx;
var dy=eye.centerY-thing.cy;
var dist=Math.sqrt(dx*dx+dy*dy);
if(dist>(thing.radius-eye.radius)){
    // mouse is outside thing
    var angle=Math.atan2(dy,dx);
    // place the eye on the radius of the thing
    eye.centerX=thing.cx+(thing.radius-eye.radius)*Math.cos(angle);
    eye.centerY=thing.cy+(thing.radius-eye.radius)*Math.sin(angle);
}

监听mousemove事件

canvas.onmousemove=handleMousemove;

在mousemove上，清除画布

context.clearRect(0,0,canvas.width,canvas.height);

获取鼠标位置并将眼睛对象设置到该位置

function handleMousemove(e){
     // tell the browser we're handling this event
     e.preventDefault();
     e.stopPropagation();
     // calc the mouse position
     var BB=canvas.getBoundingClientRect();
     eye.centerX=parseInt(e.clientX-BB.left);
     eye.centerY=parseInt(e.clientY-BB.top);
}

重画你的手臂和腿：

context.drawImage(thing,0,0);

重画你的眼睛：

drawEye(eye);

现在，应用一些基本的三角学将眼睛包含在物体内部：

  function drawEye(eye) {
  bepaalCoordinaten(eye);

  // eye
  context.beginPath();
  context.arc(eye.centerX, eye.centerY, eye.radius, 0, Math.PI * 2);
  context.fillStyle = "#fff";
  context.fill();
  context.closePath();

  // iris
  context.beginPath();
  context.arc(eye.centerX + eye.pupilX, eye.centerY + eye.pupilY, eye.radius / 2, 0, Math.PI * 2);
  context.fillStyle = "#007";
  context.fill();
  context.closePath();

  // pupil
  context.beginPath();
  context.arc(eye.centerX + eye.pupilX, eye.centerY + eye.pupilY, eye.radius / 5, 0, Math.PI * 2);
  context.fillStyle = "#000";
  context.fill();
  context.closePath();

  context.restore();
}

// test if mouse is outside thing
// if it's outside, contain the eye inside the thing
var dx=eye.centerX-thing.cx;
var dy=eye.centerY-thing.cy;
var dist=Math.sqrt(dx*dx+dy*dy);
if(dist>(thing.radius-eye.radius)){
    // mouse is outside thing
    var angle=Math.atan2(dy,dx);
    // place the eye on the radius of the thing
    eye.centerX=thing.cx+(thing.radius-eye.radius)*Math.cos(angle);
    eye.centerY=thing.cy+(thing.radius-eye.radius)*Math.sin(angle);
}

下面是示例代码和演示：

  function drawEye(eye) {
  bepaalCoordinaten(eye);

  // eye
  context.beginPath();
  context.arc(eye.centerX, eye.centerY, eye.radius, 0, Math.PI * 2);
  context.fillStyle = "#fff";
  context.fill();
  context.closePath();

  // iris
  context.beginPath();
  context.arc(eye.centerX + eye.pupilX, eye.centerY + eye.pupilY, eye.radius / 2, 0, Math.PI * 2);
  context.fillStyle = "#007";
  context.fill();
  context.closePath();

  // pupil
  context.beginPath();
  context.arc(eye.centerX + eye.pupilX, eye.centerY + eye.pupilY, eye.radius / 5, 0, Math.PI * 2);
  context.fillStyle = "#000";
  context.fill();
  context.closePath();

  context.restore();
}

// test if mouse is outside thing
// if it's outside, contain the eye inside the thing
var dx=eye.centerX-thing.cx;
var dy=eye.centerY-thing.cy;
var dist=Math.sqrt(dx*dx+dy*dy);
if(dist>(thing.radius-eye.radius)){
    // mouse is outside thing
    var angle=Math.atan2(dy,dx);
    // place the eye on the radius of the thing
    eye.centerX=thing.cx+(thing.radius-eye.radius)*Math.cos(angle);
    eye.centerY=thing.cy+(thing.radius-eye.radius)*Math.sin(angle);
}

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
函数reOffset（）{
var BB=canvas.getBoundingClientRect（）；
offsetX=BB.left；
offsetY=BB.top；
}
var offsetX，offsetY；
reOffset（）；
onscroll=函数（e）{reOffset（）；}
onresize=函数（e）{reOffset（）；}
变量眼={centerX:0，centerY:0，半径：10}；
var-thing={cx:115，cy:125，半径：75}；
var img=新图像（）；
img.onload=启动；
img.src=”https://dl.dropboxusercontent.com/u/139992952/stackoverflow/thing.png";
函数start（）{
ctx.drawImage（img，0,0）；
$（“#canvas”）.mousemove（函数（e）{handleMouseMove（e）；}）；
}
功能（眼睛）{
//演示简化了眼睛--将其更改为您的复杂眼睛
ctx.beginPath（）；
ctx.弧（eye.centerX，eye.centerY，eye.radius，0，Math.PI*2）；
ctx.closePath（）；
ctx.fillStyle=“#000”；
ctx.fill（）；
ctx.strokeStyle='deepskyblue'；
ctx.线宽=3；
ctx.stroke（）；
}
功能手柄移动（e）{
//告诉浏览器我们正在处理此事件
e、 预防默认值（）；
e、 停止传播（）；
//计算鼠标位置
eye.centerX=parseInt（e.clientX-offsetX）；
eye.centerY=parseInt（e.clientY-offsetY）；
//测试鼠标是否在物体外部
//如果在外面，把眼睛放在里面
var dx=eye.centerX-thing.cx；
var dy=eye.centerY-thing.cy；
var dist=数学sqrt（dx*dx+dy*dy）；
如果（距离>（物体半径眼睛半径））{
//老鼠是外面的东西
变量角度=数学常数2（dy，dx）；
//将眼睛放在物体的半径上
eye.centerX=thing.cx+（thing.radius-eye.radius）*Math.cos（角度）；
eye.centerY=thing.cy+（thing.radius-eye.radius）*Math.sin（角度）；
}
//清理画布
ctx.clearRect（0,0，cw，ch）；
//重画
ctx.drawImage（img，0,0）；
//重画眼睛
眼睛；
}

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

移动鼠标以移动眼睛。

我为我的回答不确定表示歉意。有几件事我还在挣扎。我将所有内容都放在一个HTML文件中，并尝试运行它。这可能是因为图像未加载？对不起，如果我犯了任何明显的错误

<html>
<head>
<style type="text/css">
    body{ background-color: ivory; }
    #canvas{border:1px solid red; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
    var BB=canvas.getBoundingClientRect();
    offsetX=BB.left;
    offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }

var eye={centerX:0,centerY:0,radius:10};
var thing={cx:115,cy:125,radius:75};

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/thing.png";
function start(){
    ctx.drawImage(img,0,0);
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
}

function drawEye(eye){
    // demo has simplified eye -- change this to your complex eye
    ctx.beginPath();
    ctx.arc(eye.centerX, eye.centerY, eye.radius, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fillStyle = "#000";
    ctx.fill();
    ctx.strokeStyle='deepskyblue';
    ctx.lineWidth=3;
    ctx.stroke();
}

function handleMouseMove(e){
    // tell the browser we're handling this event
    e.preventDefault();
    e.stopPropagation();
    // calc mouse position
    eye.centerX=parseInt(e.clientX-offsetX);
    eye.centerY=parseInt(e.clientY-offsetY);
    // test if mouse is outside thing
    // if it's outside, contain the eye inside the thing
    var dx=eye.centerX-thing.cx;
    var dy=eye.centerY-thing.cy;
    var dist=Math.sqrt(dx*dx+dy*dy);
    if(dist>(thing.radius-eye.radius)){
        // mouse is outside thing
        var angle=Math.atan2(dy,dx);
        // place the eye on the radius of the thing
        eye.centerX=thing.cx+(thing.radius-eye.radius)*Math.cos(angle);
        eye.centerY=thing.cy+(thing.radius-eye.radius)*Math.sin(angle);
    }
    // clear the canvas
    ctx.clearRect(0,0,cw,ch);
    // redraw the thing
    ctx.drawImage(img,0,0);
    // redraw the eye
    drawEye(eye);
}
</script>
</head>
<body>
<h4>Move mouse to move the eye.</h4>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

正文{背景色：象牙；}
#画布{边框：1px纯红；}
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
函数reOffset（）{
var BB=canvas.getBoundingClientRect（）；
offsetX=BB.left；
offsetY=BB.top；
}
var offsetX，offsetY；
reOffset（）；
onscroll=函数（e）{reOffset（）；}
onresize=函数（e）{reOffset（）；}
变量眼={centerX:0，centerY:0，半径：10}；
var-thing={cx:115，cy:125，半径：75}；
var img=新图像（）；
img.onload=启动；
img.src=”https://dl.dropboxusercontent.com/u/139992952/stackoverflow/thing.png";
函数start（）{
ctx.drawImage（img，0,0）；
$（“#canvas”）.mousemove（函数（e）{handleMouseMove（e）；}）；
}
功能（眼睛）{
//演示简化了眼睛--将其更改为您的复杂眼睛
ctx.beginPath（）；
ctx.弧（eye.centerX，eye.centerY，eye.radius，0，Math.PI*2）；
ctx.closePath（）；
ctx.fillStyle=“#000”；
ctx.fill（）；
ctx.strokeStyle='deepskyblue'；
ctx.线宽=3；
ctx.stroke（）；
}
功能手柄移动（e）{
//告诉浏览器我们正在处理此事件
e、 预防默认值（）；
e、 停止传播（）；
//计算鼠标位置
eye.centerX=parseInt（e.clientX-offsetX）；
eye.centerY=parseInt（e.clientY-offsetY）；
//测试鼠标是否在物体外部
//如果在外面，把眼睛放在里面
var dx=eye.centerX-thing.cx；
var dy=eye.centerY-thing.cy；
var dist=数学sqrt（dx*dx+dy*dy）；
如果（距离>（物体半径眼睛半径））{
//老鼠是外面的东西
变量角度=数学常数2（dy，dx）；
//将眼睛放在物体的半径上
eye.centerX=thing.cx+（thing.radius-eye.radius）*Math.cos（角度）；
eye.centerY=thing.cy+（thing.radius-eye.radius）*Math.sin（角度）；
}
//清理画布
ctx.clearRect（0,0，cw，ch）；
//重画
ctx.drawImage（img，0,0）；
//重画眼睛
眼睛；
}
移动鼠标以移动眼睛。

似乎不适合我。尽管如此，它看起来很神奇，你这么多的反应。“似乎不适合我…”请解释。这段代码在Windows10+[Edge | Chrome | Firefox]中运行良好。