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>

为什么Ball的速度在画布的角落处较低？

1 个答案: