JavascriptとHTML5キャンバスで2dのオブジェクトの前に円を描く方法

Question

私はこの1つの数学で苦労しています。私はキャンバスの周りをランダムに動く矢印を持っています。滑らかに回転し、次のX/Y位置に向かって移動します。すばらしいです。サークルオブジェクトを常に矢印のすぐ前に表示させるにはどうすればよいですか。矢印がその先端に円を保持しているかのようになります。回転なしで周り

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

上記移動矢印：

は、ここに私のコードです。私の回転方法は次の通りです：

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

Answer 1

矢印の変形をそのまま使用し、矢印の最後にボールを描くには「右」に進みます。

図面操作と変換操作を分離することをお勧めします。矢印を描くことができるこの方法は、その位置や回転を気にせずに単一の方法です。メソッドの引数としてフラグを使用して、ボールを追加することができます。

例

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>

Answer 2

極座標を使ってオブジェクトをペースするには、三角関数cosとsinを使います。たとえば

ため

var distance = 100; 
var angle = 4; // angle in radians 

var x = Math.cos(angle) * distance; 
var y = Math.sin(angle) * distance; 

xとyを使用すると、矢印COORDに追加するものです。