0

当我单击画布时，我试图使图像出现在鼠标坐标的位置。

现在我让它出现了，但我只能弄清楚如何通过自动更新坐标来做到这一点，并且图像将在“onclick”之后跟随鼠标。

我需要这样做，这样图像才会移动到我单击的位置，而不是跟随光标。

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
    </head>
<title>Click to make a sad face</title>

</head>


<body>
<canvas id="myCanvas" width="2000" height="1000", onClick="makeface();"></canvas>

<script type="text/javascript">
function writeMessage(canvas, message) {
        var ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.font = '18pt Calibri';
        ctx.fillStyle = 'black';
        ctx.fillText(message, 10, 25);
      }

function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top
        };
      }

      var canvas = document.getElementById('myCanvas');
      var ctx = canvas.getContext('2d');

      canvas.addEventListener('mousemove', function(evt) 
      {
        var mousePos = getMousePos(canvas, evt);
        var message = 'Click to make a face appear at coordinates: ' + mousePos.x + ',' + mousePos.y;
        writeMessage(canvas, message);
      }, false);

      function makeface() 
      { 
       canvas.addEventListener('mousemove', function(evt) 
      {
        var mousePos2 = getMousePos(canvas, evt);
        var headx = mousePos2.x;
        var heady = mousePos2.y;
        var message = 'You made the face appear, you are currently at coordinates: ' + mousePos2.x + ',' + mousePos2.y;
        writeMessage(canvas, message);
        var headrad = 50;
        var smileoffsetx=0;
        var frownoffsety = 33;
        var smilerad=20;
        var eyeoffsety = -10;
        var lefteyeoffsetx = -15;
        var righteyeoffsetx = -lefteyeoffsetx;
        var eyerad = 8;

        ctx.strokeStyle="blue";
        ctx.lineWidth = 5;
        ctx.beginPath();
        ctx.arc(headx,heady,headrad,0,2*Math.PI,true);
        ctx.closePath();
        ctx.stroke();
        ctx.beginPath()
        ctx.arc(headx+smileoffsetx,heady+frownoffsety,smilerad,-.20*Math.PI,-.80*Math.PI,true);
        ctx.stroke();
            ctx.beginPath()
            ctx.arc(headx+lefteyeoffsetx,heady+eyeoffsety,eyerad,0,2*Math.PI,true);
              ctx.fillStyle="blue";
        ctx.fill();
        ctx.beginPath()
              ctx.arc(headx+righteyeoffsetx,heady+eyeoffsety,eyerad,0,2*Math.PI,true);
        ctx.fill();
          }, false);
}

</script>

</body>
</html>
4

2 回答 2

1

发生这种情况是因为您的 writeMessage 函数正在清除整个画布。

这是我快速而肮脏的修复：

<canvas id="myCanvas" width="2000" height="1000" onClick="document.madeFace = 0; makeface();"></canvas>

...

  function makeface() 
  { 
   canvas.addEventListener('mousemove', function(evt) 
  {
    var mousePos2 = getMousePos(canvas, evt);
    document.madeFace = document.madeFace || mousePos2; /* added */
    var message = 'You made the face appear, you are currently at coordinates: ' + mousePos2.x + ',' + mousePos2.y;
    mousePos2 = document.madeFace; /* added */
    var headx = mousePos2.x;
    var heady = mousePos2.y;

...

这段代码的作用是在用户点击后立即存储人脸的坐标。当用户再次单击时，变量“document.madeFace”被重置为 0，因此重新计算人脸的坐标。

但是每次鼠标移动时，脸部仍然会重新绘制，因此即使整个画布都被清除，它仍然会出现。

于 2013-03-26T19:15:10.930 回答
0

这是为了让它在 onclick 而不是在 onclick 之后发生。

将此变量放在函数之外：

var faceHandler = function(evt) 
  {
    var mousePos2 = getMousePos(canvas, evt);
    document.madeFace = document.madeFace || mousePos2;

...直到函数结束，即现在在行中的花括号，如下所示：

   }, false);

然后在函数外注册onclick，在函数内注册mousemove：

   canvas.addEventListener('click', faceHandler, false);
 function makeface() 
 { 
     canvas.addEventListener('mousemove', faceHandler, false);
 }
于 2013-03-26T19:45:23.010 回答