如何修复JavaScript代码实现Canvas每秒绘制一个三角形

方案一：使用setInterval实现 #

以下是修正后的代码，确保每次调用都能正确绘制三角形：

HTML结构 #

<canvas id="myCanvas" width="400" height="400" style="background-color: black;"></canvas>

JavaScript代码 #

// 获取画布和上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 生成并绘制随机三角形的函数
function drawRandomTriangle() {
  // 生成三个随机顶点坐标
  const points = [
    [Math.random() * canvas.width, Math.random() * canvas.height],
    [Math.random() * canvas.width, Math.random() * canvas.height],
    [Math.random() * canvas.width, Math.random() * canvas.height]
  ];

  // 生成随机填充色
  const fillColor = `rgb(${Math.floor(Math.random()*256)}, ${Math.floor(Math.random()*256)}, ${Math.floor(Math.random()*256)})`;

  // 开始绘制路径
  ctx.beginPath();
  ctx.moveTo(...points[0]);
  ctx.lineTo(...points[1]);
  ctx.lineTo(...points[2]);
  ctx.closePath(); // 闭合三角形路径

  // 设置样式并填充
  ctx.fillStyle = fillColor;
  ctx.fill();

  // 可选：添加白色描边增强可见性
  ctx.strokeStyle = '#fff';
  ctx.stroke();
}

// 每秒执行一次绘制
setInterval(drawRandomTriangle, 1000);

你之前的setInterval代码无效，大概率是以下原因之一：

• 未正确获取Canvas上下文ctx，或ctx处于函数作用域外部无法访问
• 绘制时遗漏了beginPath()（导致路径叠加混乱）、closePath()（未闭合三角形）或fill()/stroke()（未实际渲染图形）这些关键步骤
• 画布尺寸设置错误，导致图形绘制在可视区域外

方案二：使用requestAnimationFrame（更推荐） #

requestAnimationFrame会与浏览器刷新同步，避免setInterval可能出现的延迟累积问题。通过时间戳控制每秒绘制一次：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let lastDrawTimestamp = 0;

function drawLoop(currentTimestamp) {
  // 当距离上次绘制超过1秒时，执行绘制
  if (currentTimestamp - lastDrawTimestamp >= 1000) {
    drawRandomTriangle();
    lastDrawTimestamp = currentTimestamp;
  }
  // 持续循环
  requestAnimationFrame(drawLoop);
}

// 复用之前的drawRandomTriangle函数
function drawRandomTriangle() {
  const points = [
    [Math.random() * canvas.width, Math.random() * canvas.height],
    [Math.random() * canvas.width, Math.random() * canvas.height],
    [Math.random() * canvas.width, Math.random() * canvas.height]
  ];

  const fillColor = `rgb(${Math.floor(Math.random()*256)}, ${Math.floor(Math.random()*256)}, ${Math.floor(Math.random()*256)})`;

  ctx.beginPath();
  ctx.moveTo(...points[0]);
  ctx.lineTo(...points[1]);
  ctx.lineTo(...points[2]);
  ctx.closePath();
  ctx.fillStyle = fillColor;
  ctx.fill();
  ctx.strokeStyle = '#fff';
  ctx.stroke();
}

// 启动循环
requestAnimationFrame(drawLoop);

关键注意事项 #

• 上下文作用域：确保ctx变量在绘制函数中可访问，避免因作用域问题导致无法调用绘图API
• 路径管理：每次绘制新图形前必须调用beginPath()，否则会和之前的路径合并，导致图形异常
• 渲染触发：定义路径后必须调用fill()或stroke()，否则图形不会被渲染到画布上
• 时间控制：使用requestAnimationFrame时，必须通过时间戳计算间隔，不能直接依赖其调用频率（通常为60次/秒）

内容的提问来源于stack exchange，提问作者susanliu