為什么Ball的速度在畫布的角落較低？

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>