0

キャンバスに五角形の図形が 1 つあり、クリックでマウスがある場所に移動したいと考えています。

コード

<canvas id="fld" width="1000px" height="800"></canvas>
    <script type="text/javascript"><!--
    onload = function() { draw(); };
    function draw() {
      var canvas = document.getElementById('fld');
      if ( ! canvas || ! canvas.getContext ) {return false;}
      var ctx = canvas.getContext('2d');
      //Pentagon
      ctx.beginPath();
      ctx.strokeStyle = 'rgb(255, 0, 0)';
      ctx.moveTo(100,10);
      for (var i=1;i<=5; ++i) {
        th=i * 2 * Math.PI/5;
        x=100+90*Math.sin(th);
        y=100-90*Math.cos(th);
        ctx.lineTo(x,y);
      }
      ctx.stroke();
      ctx.beginPath();
      ctx.arc(900, 60, 40, 0, 2 * Math.PI, false);
      ctx.fillStyle = "rgb(255, 0, 0)";
      ctx.fill();
      ctx.strokeStyle = "black";
      ctx.stroke();
     }
    </script>
4

1 に答える 1

1

いくつかの変更を加えるだけで、これは機能します。

まず、draw（）関数を変更して、2つのパラメーター、つまり、図形が描画されるX位置とY位置を受け取るようにする必要があります。次に、渡されるX値とY値に基づくように、使用するハードコードされた値を変更する必要があります。

次に、onclickハンドラーをキャンバスに追加する必要があります。クリックイベントを受け取ると、マウスがクリックされたキャンバスのX座標とY座標を取得できます。

次に、キャンバスをクリアして、マウスクリックXおよびYで更新された描画関数を呼び出すことができます。

ボタンが押されたときにマウスの位置を取得する方法については、onclickハンドラーを検索してください。addEventListenerを使用してクリックハンドラーをアタッチする必要があります。これにより、関数は、関数に渡されたイベントをトリガーしたイベントを取得します。次に、イベントオブジェクトからクリックの座標を抽出できます。

于 2013-02-22T13:39:24.233 に答える