HTML5 canvas / Jquery mousemove + mouseclick事件

时间:2014-04-13 06:25:40

标签: jquery html5-canvas mousemove mouseclick-event jquery-click-event

我正在尝试使用一个简单的交互式大炮,它以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>

最简单的方法是让大炮跟随我的鼠标然后射出炮弹?

1 个答案:

答案 0 :(得分:0)

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