js 绘制css动画轨迹

要绘制 CSS 动画轨迹，可以使用 canvas 元素和 JavaScript 来实现。具体步骤如下：

1. 创建一个 canvas 元素，并设置宽高。

2. 使用 getContext() 方法获取绘图上下文。

3. 使用绘图上下文的 beginPath() 方法开始路径绘制。

4. 使用 moveTo() 方法将路径移动到起点。

5. 使用 lineTo() 方法连接路径到终点，并设置动画的轨迹。

6. 使用 stroke() 方法绘制路径。

7. 使用 requestAnimationFrame() 方法递归调用绘制函数，实现动画效果。

以下是一个绘制 CSS 动画轨迹的示例代码：

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

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

let x = 0;
let y = 0;
let animate = true;

function draw() {
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(x, y);
  ctx.strokeStyle = "red";
  ctx.stroke();
  x += 1;
  y += 1;
  if (x > canvas.width || y > canvas.height) {
    animate = false;
  }
  if (animate) {
    requestAnimationFrame(draw);
  }
}

requestAnimationFrame(draw);

以上代码会在 canvas 上绘制一条从左上角到右下角的红色直线，实现了一个简单的动画效果。你可以根据自己的需求修改绘制的轨迹和动画效果。