HTML5 canvas/Jquery mousemove + mouseclick 事件

Question

我正在尝试制作一个简单的交互式大炮，它可以跟随鼠标以 180 度弧形移动。然后，我希望它在您每次单击屏幕上的任意位置时发射炮弹。

我正在使用 HTML5 画布和/或 jquery 来完成这项工作，到目前为止，我认为我应该使用 mousemove 事件，但我确定这是否是最简单的方法。但是，另一方面，我可以让我的大炮不断旋转并设置一个函数，将大炮指向一组点，然后每次移动鼠标时调用该函数。这是一个草率的想法，但我只是被难住了。

到目前为止，我在画布上绘制了我的大炮，如下所示：http://jsfiddle.net/An3D8/1/

<canvas id="myCanvas" width="800" height="500"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var x = canvas.width / 2;
  var y = canvas.height / 1;
  var radius = 50;
  var startAngle = 1 * Math.PI;
  var endAngle = 2 * Math.PI;
  var counterClockwise = false;

  context.beginPath();
  context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
  context.lineWidth = 15;

  // line color
  context.strokeStyle = 'black';
  context.stroke();
 </script>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  context.beginPath();
  context.rect(390, 400, 20, 70);
  context.fillStyle = 'grey';
  context.fill();
  context.lineWidth = 7;
  context.strokeStyle = 'black';
  context.stroke();
</script>

让大炮跟随我的鼠标然后发射炮弹的最简单方法是什么？

Answer 1

这是应用于您的佳能场景的 Cryptoburner 链接：

http://jsfiddle.net/m1erickson/BE7F2/

通过监听 mousemove 事件来指向你的经典：

• 计算鼠标位置
• 计算鼠标与您的佳能的角度
• 绘制卡农以面对鼠标位置

鼠标移动示例代码：

function handleMouseMove(e){
  e.preventDefault();
  e.stopPropagation();
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);
  var dx=mouseX-cx;
  var dy=mouseY-cy;
  var rAngle=Math.atan2(dy,dx);
  draw(rAngle-PI/2);
}

通过监听 mousedown 事件在鼠标位置射击佳能球：

• 计算鼠标位置
• 把你的佳能球画成一个封闭的弧线

鼠标按下示例代码：

function handleMouseDown(e){
  e.preventDefault();
  e.stopPropagation();
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);
  ctx.beginPath();
  ctx.arc(mouseX,mouseY,12,0,PI*2);
  ctx.closePath();
  ctx.fillStyle="black";
  ctx.fill();
  ctx.font="14px verdana";
  ctx.fillText("Bang!",mouseX-15,mouseY-20);
}