Come disegnare cerchio di fronte a un object in 2d su canvas Javascript e HTML5

Sto lottando con le matematiche su questo. Ho una freccia che si muove casualmente intorno alla canvas. Si ruota senza intoppi e si muove verso la prossima posizione X / Y. Grande. Come posso fare sempre il mio object cerchio appena davanti alla freccia; come se la freccia sta tenendo il cerchio sulla sua punta.

Ecco il mio codice:

player.prototype.draw = function (w, h, ctx) { ctx.beginPath(); ctx.save(); ctx.fillStyle = '#E50000'; if (this.XPercent !== 0 && this.YPercent !== 0) { // ** moves at correct angle (no rotation involved) // Get the difference between the points var tx = this.nextXPercent - this.XPercent; var ty = this.nextYPercent - this.YPercent; // Add the x and y areas then get the square root var dist = Math.sqrt(tx * tx + ty * ty); var newX = (tx / dist) * 0.1; var newY = (ty / dist) * 0.1; this.XPercent = this.XPercent + (isNaN(newX) ? 0 : newX); this.YPercent = this.YPercent + (isNaN(newY) ? 0 : newY); } var currentX = (w / 100) * this.XPercent; var currentY = (h / 100) * this.YPercent; ctx.translate(currentX - (playerWidth / 2), currentY); currentX = (playerWidth / 2); currentY = 0; // now rotate smoothly ctx.rotate(this.getRotation2(w, h, ctx) * Math.PI / 180); ctx.moveTo(currentX, currentY); ctx.lineTo(currentX - playerWidth, currentY - (playerHeight / 2)); ctx.lineTo(currentX - playerWidth, currentY + (playerHeight / 2)); ctx.fill(); ctx.restore(); ctx.closePath(); }; 

Quanto sopra sposta la freccia in giro senza rotazione. Il mio metodo di rotazione è il seguente:

 player.prototype.getRotation2 = function (w, h, ctx) { var y2 = this.nextYPercent; var y1 = this.YPercent.toFixed(0); var x2 = this.nextXPercent; var x1 = this.XPercent.toFixed(0); if (x1 == x2 && y2 == y1) { return this.angle; } var Xdiff = y2 - y1; var Ydiff = x2 - x1; this.angle %= 360; var rads = Math.atan2(y2 - y1, x2 - x1); var targetAngle = rads * (180 / Math.PI); targetAngle = (targetAngle + 360) % 360; if (this.angle != targetAngle) { var netAngle = (this.angle - targetAngle + 360) % 360; var delta = Math.min(Math.abs(netAngle - 360), netAngle, 5); var sign = (netAngle - 180) >= 0 ? 1 : -1; this.angle += sign * delta + 360; this.angle %= 360; if (this.hasBall) { // This is where we should position the circle at correct angle gameBall.XPercent = this.XPercent + ??? gameBall.YPercent = this.YPercent + ??? } } return this.angle; }; 

Basta continuare a utilizzare la trasformazione che hai per la freccia e andare "a destra" per disegnare la palla alla fine della freccia.

Suggerisco di separare le operazioni di disegno e di trasformazione. In questo modo è ansible disegnare la freccia in modo unico senza preoccuparsi della sua posizione o rotazione. La palla può essere aggiunta utilizzando un flag come argomento al metodo.

Esempio

 var ctx = c.getContext("2d"), radius = 7; function drawShape() { // Always draw with (0,0) as basis, this will rotate at tail. // If rotate at head, just offset the values so head is at (0,0) ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(50, 0); ctx.moveTo(50, 0); ctx.lineTo(40, -5); ctx.lineTo(40, 5); ctx.fill(); // add circle at tip ctx.moveTo(60 + radius, 0); ctx.arc(60, 0, radius, 0, 6.28); ctx.stroke(); } // just to add action for the demo window.onmousemove = function(e) { var rect = c.getBoundingClientRect(), x = e.clientX - rect.left, y = e.clientY - rect.top, dx = x - c.width*0.5, dy = y - c.height*0.5, a = Math.atan2(dy, dx); ctx.clearRect(0,0,c.width,c.height) ctx.translate(c.width*0.5, c.height*0.5); ctx.rotate(a); drawShape(); ctx.setTransform(1,0,0,1,0,0); } 
 <canvas id=c></canvas> 

Per ritriggersre un object tramite le coordinate polari utilizzare le funzioni trigonometriche cos e peccato.

per esempio

 var distance = 100; var angle = 4; // angle in radians var x = Math.cos(angle) * distance; var y = Math.sin(angle) * distance; 

X e y sono ciò che si aggiunge alla coordinata freccia.