如何在 Javascript 和 HTML5 画布上的 2d 对象前面绘制圆

Question

我正在为这个问题的数学而苦苦挣扎。 我有一个在画布上随机移动的箭头。它平稳旋转并移动到下一个 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 是您添加到箭头坐标的内容。