Question

我在HTML5 Canvas创建了一条水平线。我想动画线来上下移动无限。有可能吗？

function horizontal_line() {
  context.beginPath();
  context.moveTo(100, 100);
  context.lineTo(5000, 100);
  context.strokeStyle = "Green";
  context.stroke();
}

Answer 1

对于动画，您需要有一种方法来绘制不同的帧，并且在每个帧中您必须删除前一个帧，计算线的新位置，然后再次绘制线：

＆＃13;

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "Green";
var posY = 0;
var lineLength = 10;
var speed = 2;

function drawLine() {
	ctx.beginPath();
  ctx.moveTo(10, posY);
  ctx.lineTo(10, posY+lineLength);
  ctx.stroke();
}

function moveLine () {
	posY += speed;
  
  if (posY < 0 || posY > canvas.height) {
	  speed = speed * -1;
  }
}

function loop() {
	// clear old frame;
  ctx.clearRect(0,0,canvas.width, canvas.height);
  moveLine();
  drawLine();
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

＆＃13;

<canvas id="canvas"></canvas>

＆＃13;

在此示例中，requestAnimationFrame为您提供所需的帧，因此函数loop()会被反复调用。在那里，我们使用clearRect()清除旧框架，计算新位置，然后使用drawLine()绘制新线条。

画布，动画线上下移动

1 个答案: