0

キャンバスをクリックしたときに、マウスの座標の位置に画像が表示されるようにしようとしています。

今は表示されていますが、座標を自動更新する方法しかわかりません。画像は「クリック」後にマウスに追従します。

カーソルに従わずに、クリックした場所に画像が移動するようにする必要があります。

<!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 に答える