Question

我是javascript / html5的新手。我有一个在Stack Overflow数据库中找不到的问题。我希望你们能帮助我！

我有一张图片 image_noeye 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();
}

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

提前谢谢你们！

Answer 1

有一个名为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);
}

Answer 2

你无法“移动”在html5画布中绘制的任何内容。相反，您删除整个画布并重新绘制新位置的内容。

要在鼠标位置重绘：

收听mousemove事件，
```
canvas.onmousemove=handleMousemove;
```

在鼠标移动时，清除画布

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);
```

现在，应用一些基本的三角函数来包含事物中的眼睛：

// 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=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);
}

body{ background-color: ivory; }
#canvas{border:1px solid red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Move mouse to move the eye.</h4>
<canvas id="canvas" width=300 height=300></canvas>

Answer 3

我对我的不确定回应表示歉意。还有一些我还在苦苦挣扎的事情。我已将所有内容放在一个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>

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

3 个答案: