HTML5 Canvas / jQuery MouseMove + Mouseclick событие

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, примененная к вашему сценарию Canon:

http://jsfiddle.net/m1erickson/be7f2/

Укажите Canon, прослушивая события MouseMove:

.
• Рассчитать положение мыши
• Рассчитать угол мыши по сравнению с вашим Canon
• Нарисуйте канону, чтобы противостоять положению мыши

Пример 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);
}

.

Стреляй на шарик Canon на положении мыши, слушая события Mousedown:

.
• Рассчитать положение мыши
• Нарисуйте вас Canon Ball как закрытая дуга

Пример код 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);
}

.