如何使用 JavaScript 每秒在 Canvas 上绘制一个新三角形-js教程-PHP中文网

如何使用 JavaScript 每秒在 Canvas 上绘制一个新三角形

本文详解如何通过 requestanimationframe 结合时间控制逻辑，实现每秒精确绘制一个动态三角形的动画效果，避免 setinterval 导致的上下文累积与渲染异常问题。

本文详解如何通过 requestanimationframe 结合时间控制逻辑，实现每秒精确绘制一个动态三角形的动画效果，避免 setinterval 导致的上下文累积与渲染异常问题。

在 Canvas 动画开发中，直接使用 setInterval(draw, 1000) 绘制图形看似直观，但存在两个关键隐患：一是 ctx.rotate() 等变换操作会永久修改绘图上下文状态，导致后续三角形叠加旋转、坐标错乱；二是未清空画布（clearRect）或重置变换（resetTransform），使所有图形不断叠加在同一帧上，视觉上“看不见新增”——这正是你代码中仅见黑底、无三角形的根本原因。

正确的做法是采用 基于时间戳的帧循环 + 状态隔离 + 主动清理 的组合策略。requestAnimationFrame 并非“每秒调用一次”，而是浏览器推荐的高精度、节能型渲染调度机制（通常 60fps）。我们需在其回调中主动判断是否已过 1 秒，并仅在此时执行一次绘图逻辑。

以下是完整可运行的解决方案（已适配你的三角形绘制需求）：

javascript-typescript-typescript-scaffold

你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型

下载

<canvas class="myCanvas" style="display: block; background: #000;"></canvas>

const canvas = document.querySelector('.myCanvas');
const ctx = canvas.getContext('2d');

// 自适应窗口尺寸（可选）
function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();

// 初始化参数（每次绘制独立计算，不累积变换）
let length = 250;
let moveOffset = 20;
let triangleCount = 0;
let lastDrawTime = 0; // 上次绘制的时间戳（毫秒）

// 角度转弧度工具函数
function degToRad(deg) {
  return deg * Math.PI / 180;
}

// 绘制单个等边三角形（中心相对移动，无全局 rotate）
function drawTriangle() {
  const centerX = moveOffset + length / 2;
  const centerY = moveOffset;
  const height = (length / 2) * Math.tan(degToRad(60)); // 等边三角形高

  ctx.fillStyle = `rgba(${255 - length}, 0, ${255 - length}, 0.9)`;
  ctx.beginPath();
  ctx.moveTo(moveOffset, moveOffset);                          // 左顶点
  ctx.lineTo(moveOffset + length, moveOffset);                // 右顶点
  ctx.lineTo(centerX, moveOffset + height);                   // 上顶点
  ctx.closePath();
  ctx.fill();

  // 更新下一次绘制的参数（模拟原逻辑的递减与偏移）
  length = Math.max(10, length - 1); // 防止负值
  moveOffset += 0.7;
  triangleCount++;
}

// 主动画循环
function animate(timestamp) {
  // 第一帧初始化时间戳
  if (!lastDrawTime) lastDrawTime = timestamp;

  // 判断是否满 1000ms（1秒），注意使用 >= 避免因帧率波动导致漏帧
  if (timestamp - lastDrawTime >= 1000) {
    // ✅ 关键：清除画布，确保每次绘制干净独立
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // ✅ 绘制新三角形
    drawTriangle();

    // ✅ 重置计时起点
    lastDrawTime = timestamp;
  }

  // 持续请求下一帧（即使未绘制，也保持循环）
  requestAnimationFrame(animate);
}

// 启动动画
requestAnimationFrame(animate);

⚠️ 关键注意事项：

禁止全局 rotate()/translate() 累积：原 MDN 示例中 ctx.rotate() 作用于整个上下文，后续所有绘制都会被旋转。本方案改用绝对坐标计算，完全规避状态污染。
必须 clearRect()：Canvas 是位图，不清理就会残留所有历史像素。这是“看不见新图形”的最常见原因。
时间判断用 >= 1000 而非 === 1000：requestAnimationFrame 的 timestamp 是近似值，且浏览器可能丢帧，严格相等会导致动画卡顿或停滞。
参数衰减需设下限：如 length = Math.max(10, length - 1)，防止无限递减导致三角形退化为点。
响应式适配：resizeCanvas() 确保窗口缩放后仍正常工作（可根据需求移除）。