如何在Canvas动画中修改Y轴位置，实现圆形右移后换行重绘效果

首先明确：把位置变动逻辑直接整合到现有requestAnimationFrame驱动的动画循环中更合适，这是Canvas动画的标准实现方式，性能和流畅度都优于自定义外层循环。

现有代码的问题 #

你修改Y轴不生效的核心原因有两个：

• 边界判断逻辑里的y + y只是做了数值计算，没有赋值给y变量，实际Y坐标根本没有更新
• 碰到右边界后你直接把水平速度dx设为0，圆形会直接停住，不会重置到左侧重新移动

修复后可运行的代码 #

var canvas3 = document.getElementById("canvas3");

canvas3.width = 300;
canvas3.height = 500;

var c3 = canvas3.getContext("2d");

var radius = 13;
// 直径提前算好，避免重复计算
var diameter = radius * 2;
var x = radius;
var y = radius;

var dx = 1;

function animate3() {
  requestAnimationFrame(animate3);

  c3.clearRect(0, 0, 300, 500);

  // 只判断右边界即可，圆形仅从左往右移动
  if (x + radius > 300) {
    // 重置X到最左侧
    x = radius;
    // Y向下偏移一个直径的距离
    y += diameter;
    // 额外判断：如果Y已经超出画布下边界，就重置到顶部重新开始，不需要可以删除
    if (y + radius > 500) {
      y = radius;
    }
  }

  x += dx;

  c3.beginPath();
  c3.arc(x, y, 12, 0, Math.PI * 2, false);
  c3.stroke();
  c3.fillText(5, x - 3, y + 3);
}

animate3();

核心修改点说明 #

• 删掉了没用的dy变量和对应的Y方向边界判断，当前需求只有到右边界后下跳一行，不需要Y方向持续移动
• 右边界触发后，直接把X坐标重置为初始左端点，同时Y坐标累加一个直径的长度，实现下跳一行的效果
• 增加了Y坐标超出画布下边界的重置逻辑，避免圆形跑出画布后看不到，如果不需要可以自行删除该判断

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