javascript - 为什么 Canvas Angular 落的球速度较低？

Question

抱歉我的英语不是我的母语。我希望你能理解我。我制作了一个球，它在我定义的 Canvas 周围的特定路径上移动。一切都很顺利，我的球移动正确，但我注意到当球到达 Angular 落时，它的速度比直线移动时要低。有谁知道为什么会发生这种情况？这是我的代码。提前致谢!

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>