Почему скорость мяча ниже в углах холста?

Question

Извините за мой английский, это не мой родной язык. Надеюсь, ты меня понимаешь. Я сделал шар, который движется по определенному пути вокруг холста, который я определяю. Все идет хорошо, и мой мяч движется правильно, но я замечаю, что когда мяч достигает угла, его скорость ниже, чем когда он движется прямо. Кто-нибудь знает, почему это происходит? Вот мой код Заранее спасибо!

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

window.requestAnimFrame = (function(callback) {
  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
    window.setTimeout(callback, 1000 / 60);
  };
})();

var pathArray = [];
pathArray.push({
  x: 150,
  y: 100
});
pathArray.push({
  x: 1375,
  y: 100
});
pathArray.push({
  x: 1375,
  y: 230
});
pathArray.push({
  x: 150,
  y: 230
});
pathArray.push({
  x: 150,
  y: 320
});
pathArray.push({
  x: 1375,
  y: 320
});
pathArray.push({
  x: 1375,
  y: 450
});
pathArray.push({
  x: 150,
  y: 450
});

var polypoints = makePolyPoints(pathArray);
var width = 15;
var height = 30;
var speed = 1 / 2;
var position = 0;

animate();

function animate() {
  setTimeout(function() {
    requestAnimFrame(animate);
    position += speed;
    if (position > polypoints.length - 1) {
      return;
    }
    var pt = polypoints[position];
    if (pt) {
      ctx.save();
      ctx.beginPath();
      ctx.translate(pt.x, pt.y);
      ctx.arc(-width / 2, -height / 2, 12, 0, 2 * Math.PI);
      ctx.fillStyle = "#B22222";
      ctx.fill();
      ctx.restore();
    }
  }, 1000 / 60);
}

function makePolyPoints(pathArray) {

  var points = [];
  for (var i = 1; i < pathArray.length; i++) {
    var startPt = pathArray[i - 1];
    var endPt = pathArray[i];
    var dx = endPt.x - startPt.x;
    var dy = endPt.y - startPt.y;
    for (var n = 0; n <= 200; n++) {
      var x = startPt.x + dx * n / 200;
      var y = startPt.y + dy * n / 200;
      points.push({
        x: x,
        y: y
      });
    }
  }
  return (points);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="1515" height="950" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>

Answer 1

Это потому, что когда ваша функция makePolyPoints() разбивает путь на точки, она всегда создает 200 точек на линию, не принимая во внимание фактическое расстояние.

То, что вы хотите сделать, это вычислить расстояние с помощью Пифагора, а затем установить количество точек соответственно. Я включил speedFactor в параметры функции, чтобы вы могли точно настроить.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

window.requestAnimFrame = (function(callback) {
  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
    window.setTimeout(callback, 1000 / 60);
  };
})();

var pathArray = [];
pathArray.push({
  x: 150,
  y: 100
});
pathArray.push({
  x: 1375,
  y: 100
});
pathArray.push({
  x: 1375,
  y: 230
});
pathArray.push({
  x: 150,
  y: 230
});
pathArray.push({
  x: 150,
  y: 320
});
pathArray.push({
  x: 1375,
  y: 320
});
pathArray.push({
  x: 1375,
  y: 450
});
pathArray.push({
  x: 150,
  y: 450
});

var polypoints = makePolyPoints(pathArray, 5);
var width = 15;
var height = 30;
var speed = 1 / 2;
var position = 0;

animate();

function animate() {
  setTimeout(function() {
    requestAnimFrame(animate);
    position += speed;
    if (position > polypoints.length - 1) {
      return;
    }
    var pt = polypoints[position];
    if (pt) {
      ctx.save();
      ctx.beginPath();
      ctx.translate(pt.x, pt.y);
      ctx.arc(-width / 2, -height / 2, 12, 0, 2 * Math.PI);
      ctx.fillStyle = "#B22222";
      ctx.fill();
      ctx.restore();
    }
  }, 1000 / 60);
}

function makePolyPoints(pathArray, speedFactor) {

  var points = [];
  for (var i = 1; i < pathArray.length; i++) {
    var startPt = pathArray[i - 1];
    var endPt = pathArray[i];
    var dx = endPt.x - startPt.x;
    var dy = endPt.y - startPt.y;
    var distance = Math.sqrt(dx*dx+dy*dy)
    var steps = distance/speedFactor
    for (var n = 0; n <= steps; n++) {
      var x = startPt.x + dx * n / steps;
      var y = startPt.y + dy * n / steps;
      points.push({
        x: x,
        y: y
      });
    }
  }
  return (points);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="1515" height="950" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>