canvas绘制的直线动画

当我们使用Canvas绘制直线动画时，一般情况下我们需要实现以下流程：

1. 获取Canvas对象
2. 设置Canvas对象样式和属性
3. 绘制起始直线
4. 清空Canvas
5. 绘制动画过程的直线

下面是一个示例代码，它演示了如何绘制从左往右延伸的直线动画：

示例一：

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

// 获取Canvas元素并赋值给变量canvas
var canvas = document.getElementById("myCanvas");

// 获取Canvas上下文并赋值给变量ctx
var ctx = canvas.getContext("2d");

// 设置Canvas宽高
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 设置起点和终点坐标
var startX = 0;
var endX = canvas.width;

// 设置直线宽度
var lineWidth = 5;

// 绘制起始直线
ctx.beginPath();
ctx.lineWidth = lineWidth;
ctx.moveTo(startX, canvas.height / 2);
ctx.lineTo(startX + lineWidth * 5, canvas.height / 2);
ctx.stroke();

// 定义动画函数
function draw() {
  // 清空Canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制动画过程的直线
  ctx.beginPath();
  ctx.lineWidth = lineWidth;
  ctx.moveTo(startX, canvas.height / 2);
  ctx.lineTo(startX + lineWidth * 5, canvas.height / 2);
  ctx.stroke();

  startX += 5; // 直线向右移动5个像素

  if (startX < endX) { // 如果未达到终点，则继续绘制
    requestAnimationFrame(draw);
  }
}

// 启动动画
requestAnimationFrame(draw);

上述示例中，我们使用了canvas元素，获取了canvas对象并设置了它的宽高。我们还设置了起点和终点坐标，并且在draw函数中清空了Canvas并以一定的速度向右移动直线，实现了从左往右延伸的直线动画。

示例二：

下面这个示例演示了一个沿着特定路径绘制的动态直线。

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

// 获取Canvas元素并赋值给变量canvas
var canvas = document.getElementById("myCanvas");

// 获取Canvas上下文并赋值给变量ctx
var ctx = canvas.getContext("2d");

// 设置Canvas宽高
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 声明路径起点和控制点的坐标
var start = {
  x: 50,
  y: canvas.height / 2
};

var control1 = {
  x: canvas.width / 3,
  y: 100
};

var control2 = {
  x: canvas.width / 3 * 2,
  y: canvas.height - 100
};

var end = {
  x: canvas.width - 50,
  y: canvas.height / 2
};

// 定义动画函数
function draw() {
  // 清空Canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制路径
  ctx.beginPath();
  ctx.strokeStyle = '#ffffff';
  ctx.lineWidth = 5;
  ctx.moveTo(start.x, start.y);
  ctx.bezierCurveTo(control1.x, control1.y, control2.x, control2.y, end.x, end.y);
  ctx.stroke();

  // 延迟后再次绘制路径
  setTimeout(function() {
    requestAnimationFrame(draw);
  }, 2000);
}

// 启动动画
requestAnimationFrame(draw);

上述示例中，我们使用了贝塞尔曲线的控制点来绘制路径，并且使用定时器设置了路径的绘制间隔时间，实现了从起点到终点缓慢画出路径的效果。