HTML5画布/Jquery mousemove+；鼠标点击事件

我想得到一个简单的互动加农炮，它沿着你的鼠标以180度的弧线移动。然后，我希望每次你们点击屏幕上的任何地方，它都能发射炮弹

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

到目前为止，我在画布上绘制了大炮，如图所示：

var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
var x=画布宽度/2；
变量y=画布高度/1；
var半径=50；
var startAngle=1*Math.PI；
var endAngle=2*Math.PI；
var逆时针=假；
context.beginPath（）；
弧（x，y，半径，星形，端角，逆时针）；
context.lineWidth=15；
//线条颜色
context.strokeStyle='black'；
stroke（）；
var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
context.beginPath（）；
context.rect（390400,20,70）；
context.fillStyle='grey'；
context.fill（）；
context.lineWidth=7；
context.strokeStyle='black'；
stroke（）；

---

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

下面是Cryptoburner的链接，适用于您的大炮场景：

通过收听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事件，在鼠标位置发射佳能球：

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

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);
}

---

您需要计算佳能中心和鼠标位置之间的角度。

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);
}