Question

当我点击画布时，我试图让图像显示在鼠标坐标的位置。

现在我出现了它，但我只能弄清楚如何使用自动更新坐标来实现它，并且在＆＃34; onclick＆＃34;之后图像将跟随鼠标。

我需要这样做才能使图像移动到我点击的位置，而不是按照光标。

<!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>

Answer 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，因此将重新计算面部的坐标。

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

Answer 2

这是为了让它完全在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);
 }

图像出现在鼠标位置

2 个答案: