我想使用 JavaScript 和 Canvas 标签制作单行动画。我能够毫无问题地做到这一点，除了:
如果你想做一条直线，它工作正常 - 我有一个间隔(10ms)添加 1px，所以如果它从 150px(x)/20px(Y)到 150px(X)/200px(Y) ) - 一切看起来都很酷。
问题在于向右或向左的线条——例如从 150px (x)/20px (Y) 到 35px (X)/200px (Y)
这里我的动画失败了，因为每 10 毫秒向 X 和 Y 添加 1px 会使线首先到达左侧 (35px)，然后从那里到达我的终点 Y。
这是我的代码(您将需要 Firefox 或 Opera)——正如您所见，行会更快到达左侧，这就是我的问题。 :(
<html>
<script type="text/javascript" src="http://www.prototypejs.org/assets/2008/9/29/prototype-1.6.0.3.js"></script>
<style>
body {background: #fff; color: #ccc;}
</style>
<script type="text/javascript">
var startpointx = 150;
var startpointy = 25;
var curposx = 150;
var curposy = 25;
var myinterval;
function init() {
myinterval = setInterval( ' animate(35, 250) ', 10);
}
function random (n)
{
return (Math.floor (Math.random() * n));
}
function animate(endpointx, endpointy) {
if (curposx == endpointx && curposy == endpointy){
clearInterval(myinterval);
drawShape(endpointx, endpointy);
return false;
} else {
if(curposx != endpointx){
if(endpointx > curposx) {
curposx = curposx + 1;
} else {
curposx = curposx - 1;
}
}
if(curposy <= endpointy){
curposy = curposy + 1;
}
}
drawShape(curposx, curposy, "#000");
}
function drawShape(tendpointx, tendpointy, clor){
var canvas = document.getElementById('cnvs');
var ctx = canvas.getContext('2d');
ctx.clearRect(0,0,310,400);
ctx.strokeStyle = clor;
ctx.beginPath();
ctx.moveTo(startpointx ,startpointy );
ctx.lineTo(tendpointx,tendpointy);
ctx.stroke();
}
//
init();
</script>
<body>
<canvas id="cnvs" width="310" height="400" style="border: 1px solid #ccc;"></canvas>
</body>
</html>
最佳答案
假设您要从点 (0, 0) 到 (100, 200) 绘制一条直线。水平距离为 100，垂直距离为 200，这意味着当您将终点水平移动 1 个像素时，您需要将其垂直移动 2 个像素(或者，垂直移动 1 个像素，水平移动 0.5 个像素)。
要计算差异，您可以使用此算法:
var deltaX = Math.abs( endpointx - startpointx );
var deltaY = Math.abs( endpointy - startpointy );
var diffX = 1, diffY = 1;
if( deltaX > deltaY ){
diffY = deltaY / deltaX;
}
else if( deltaX < deltaY ) {
diffX = deltaX / deltaY;
}
然后在您的动画中，您需要将 curposx 和 curposy 递增/递减 1，而是分别递增/递减 diffX 和 diffY。这个计算应该在你的 animate() 函数之外完成(因为它总是返回相同的结果)。
关于javascript - JS/Canvas单行动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1754609/