Question

我正在尝试使用一个简单的交互式大炮，它以180度弧度移动，跟随鼠标移动。然后，每当你点击屏幕上的任何地方，我希望它能够射击炮弹。

我正在使用HTML5 canvas和/或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事件指出你的经典：

计算鼠标位置
计算鼠标与佳能的角度
绘制正面朝向鼠标位置

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

HTML5 canvas / Jquery mousemove + mouseclick事件

1 个答案: