javascript - context.moveTo() x 和 y 参数不使用 requestAnimationFrame 递减

Question

我有两条成 90 度 Angular 的线，我想通过旋转垂直线使 Angular 在 90 度和 0 度之间变小和变大。我试图通过更改 moveTo 参数来做到这一点，我可以增加值但不能减少它们。你也能帮我确保移动的线与动画期间的水平线长度相同。现在它看起来像完成后变小然后变大。

window.onload = function(){
	var canvas =document.getElementById("canvas");
	var context = canvas.getContext("2d");
	var length = 50;
	var x = 50;
	var y= 50;
	var forward = true;

	
	(function animate(){
		if(x  <= 201 && y <= 201){
			x++
			y++
			
		}
		if(x  > 195){
			forward = false;
		}
		// console.log(x, y)
		 if(forward == false){
		 	// alert("yo")
			x = x - 1
			y = y -1
		}
		console.log(x)
		console.log(forward)
		context.clearRect(0,0, canvas.width, canvas.height)
		context.beginPath();
		context.moveTo(x,y)
		context.lineTo(50,200);
		context.stroke();
		context.closePath();
		window.requestAnimationFrame(animate)
		

		context.beginPath();
		context.moveTo(50, 200);
		context.lineTo(200, 200)
		context.stroke();
		context.closePath();

	}())
   }

<canvas id="canvas" width="400" height="400"></canvas>

编辑:::

window.onload = function(){
	var canvas =document.getElementById("canvas");
	var context = canvas.getContext("2d");
	var length = 50;
	var x = 50;
	var y= 50;
	var dlt  = 1
	var forward = true;
	var i = 0;

	
	(function animate(){
		if(x >= 50 && x < 200 ){
			i++

			x += dlt
			y += dlt
			console.log(i)
			$(".display").html(i)
			if(i >= 150){
				X = 200;
				Y = 200;
				x -= dlt
				y -= dlt
			}
			
		}

		console.log("x", x)
		console.log(forward)
		context.clearRect(0,0, canvas.width, canvas.height)
		context.beginPath();
		context.moveTo(x,y)
		context.lineTo(50,200);
		context.stroke();
		context.closePath();
		window.requestAnimationFrame(animate)
		

		context.beginPath();
		context.moveTo(50, 200);
		context.lineTo(200, 200)
		context.stroke();
		context.closePath();

	}())

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="400" height="400"></canvas>

Answer 1

您可以使用变换而不是三 Angular 函数来绘制垂直折叠线:

这是带注释的代码和演示:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var nextTime=0;
var delay=100;
var angle=-Math.PI/2;
var cx=150;
var cy=150;
var radius=50;

requestAnimationFrame(animate);

function animate(time){

  // wait until the desired time elapses
  if(time<nextTime){requestAnimationFrame(animate); return;}
  nextTime+=delay;

  // draw the horizontal line
  ctx.clearRect(0,0,cw,ch);
  ctx.beginPath();
  ctx.moveTo(cx,cy);
  ctx.lineTo(cx+radius,cy);
  ctx.stroke();

  // use transformations to draw the vertical line
  // at the desired angle
  ctx.translate(cx,cy);
  ctx.rotate(angle);
  ctx.beginPath();
  ctx.moveTo(0,0);
  ctx.lineTo(radius,0);
  ctx.stroke();
  ctx.setTransform(1,0,0,1,0,0);

  // if the vertical line isn't horizontal, 
  // request another animation frame
  if(angle<0){ requestAnimationFrame(animate); }

  // adjust the angle
  angle+=Math.PI/90;
}

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=300 height=300></canvas>

如果你想使用 Trig，那么你可以像这样计算线端点:

var lineX1 = lineX0 + radius*Math.cos(angle);
var lineY1 = lineY1 + radius*Math.sin(angle);

[添加:在提问者的代码中添加三 Angular 函数]

您的代码已重构为使用三 Angular 函数重新定位垂直线。

var canvas =document.getElementById("canvas");
var context = canvas.getContext("2d");
var length = 50;
var x = 50;
var y= 50;
var dlt  = 1
var forward = true;
var i = 0;

var angle=-Math.PI/2;
var direction=1;

(function animate(){

  /*
		if(x >= 50 && x < 200 ){
			i++

			x += dlt
			y += dlt
			console.log(i)
			$(".display").html(i)
			if(i >= 150){
				X = 200;
				Y = 200;
				x -= dlt
				y -= dlt
			}

		}
*/

  var moveX=50+(200-50)*Math.cos(angle);
  var moveY=200+(200-50)*Math.sin(angle);

  // change the angle
  angle+=(Math.PI/120*direction);

  // if the angle is beyond vertical or horizontal then
  // swing it the other way
  if(angle<-Math.PI/2 || angle>0){ direction*=-1;}

  context.clearRect(0,0, canvas.width, canvas.height)
  context.beginPath();
  context.moveTo(moveX,moveY)
  context.lineTo(50,200);
  context.stroke();
  //		context.closePath();

  context.beginPath();
  context.moveTo(50, 200);
  context.lineTo(200, 200)
  context.stroke();
  //		context.closePath();

  window.requestAnimationFrame(animate)

}())

<canvas id="canvas" width=300 height=300></canvas>