单击时如何移动画布图形

How move a canvas figure when clicked?

本文关键字：图形 布图形 动画 何移 单击      更新时间：2023-09-26

我在画布上有一个五边形图形，我想点击一下就把它移动到鼠标所在的位置。

代码

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

您只需要做一些更改就可以了。

首先，您应该更改draw（）函数，使其具有两个参数，即图形将绘制的X和Y位置。接下来，您需要更改您使用的硬编码值，使它们基于传递的X和Y值。

其次，您应该向画布添加一个onclick处理程序。当您收到单击事件时，您可以获得单击鼠标的画布的X坐标和Y坐标。

然后，您可以清除画布，并用鼠标单击X和Y调用更新的绘图功能。

查找onclick处理程序，了解按下按钮时获取鼠标位置的方法。你必须使用addEventListener来附加点击处理程序，这样你的函数就可以将触发它的事件传递给它。然后你可以从事件对象中提取点击的单词。

相关文章：