HTML5 canvas/jquery mousemove + mouseclick event

我想要獲得一個簡單的交互式加農炮，它可以在跟隨鼠標的180度弧線中移動。然後，我希望它每次在屏幕上的任何地方點擊都可以拍攝炮彈。HTML5 canvas/jquery mousemove + mouseclick event

我使用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>

什麼會去了解都要得到大炮跟着我的鼠標，然後射擊炮彈最簡單的方法？

來源

2014-04-13 AliciaO

您需要計算佳能中心與鼠標位置之間的角度。 http://stackoverflow.com/questions/7829010/find-angle-between-two-points-respective-to-horizontal-axis – NoGray

這裏的應用到您的佳能場景Cryptoburner的鏈接：

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

點佳能通過監聽鼠標移動事件：

計算鼠標位置
計算鼠標的角度與您的佳能相比
繪製佳能面向鼠標位置

例子鼠標移動代碼：

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

來源

2014-04-13 15:30:23 markE

HTML5 canvas/jquery mousemove + mouseclick event

回答

相關問題