如何在P5.js中实现文本上移滚动或换画布的打字效果？

方案一：字幕上移并逐渐消失 #

这个方案会在文本超出画布高度后，让已绘制内容像片尾字幕一样向上滚动，直到完全移出画布。

修改后的代码 #

let dani = 'hola mundo...................\n..........................\n......................................\n...........................\n.............................\n.........................................................\n.................................\n.................................\n.................................\n......................................................\n...................\n..................\n....................\n....................\n......................\n..............................\n..............................\n...............................\n................................\n............................\n............................\n...........................\n...........................\n............................\n.............................\n..............................\n...............................\n...........................\n.....................................'

let index = 0;
let lastMillis = 0;
let scrollY = 0; // 初始化滚动偏移量
let scrollSpeed = 1; // 滚动速度，可调整

function setup() {
  createCanvas(800, 600);
  textAlign(LEFT, TOP);
  textSize(30);
  frameRate(20);
}

function draw() {
  background(220);
  stroke(0);

  // 获取当前已绘制文本内容
  let currentText = dani.substring(0, index);
  // 计算当前文本总高度
  let textHeight = textHeight(currentText);

  // 文本超出画布高度时开始滚动
  if (textHeight > height - 10) { // 10为顶部预留空间
    scrollY += scrollSpeed;
    // 可选：文本完全滚出后重置（实现循环滚动）
    // if (scrollY > textHeight) scrollY = 0;
  }

  // 绘制带滚动偏移的文本
  text(currentText, 0, 10 - scrollY, width, textHeight + textAscent());

  // 打字逻辑：固定间隔逐个字符显示
  if (millis() > lastMillis + 300 && index < dani.length) {
    index++;
    lastMillis = millis();
  }
}

关键逻辑说明 #

• scrollY 记录文本垂直偏移量，初始为0，文本超出画布后逐步增加，实现上移效果
• 通过 textHeight() 计算当前文本总高度，判断是否触发滚动
• 绘制时将y坐标设为 10 - scrollY，让文本随偏移量增加向上移动
• 调整 scrollSpeed 可控制滚动快慢，数值越大滚动速度越快

方案二：分页显示全新文本 #

如果希望文本填满当前画布后，切换到空白画布继续显示剩余内容，可以使用分页逻辑分割文本。

修改后的代码 #

let dani = 'hola mundo...................\n..........................\n......................................\n...........................\n.............................\n.........................................................\n.................................\n.................................\n.................................\n......................................................\n...................\n..................\n....................\n....................\n......................\n..............................\n..............................\n...............................\n................................\n............................\n............................\n...........................\n...........................\n............................\n.............................\n..............................\n...............................\n...........................\n.....................................'

let index = 0;
let lastMillis = 0;
let currentPageStart = 0; // 当前页面文本起始索引
let pageHeight = 0; // 当前页面已用高度

function setup() {
  createCanvas(800, 600);
  textAlign(LEFT, TOP);
  textSize(30);
  frameRate(20);
}

function draw() {
  background(220);
  stroke(0);

  // 绘制当前页面文本
  let currentPageText = dani.substring(currentPageStart, index);
  text(currentPageText, 0, 10, width, height);

  // 计算当前页面文本高度
  pageHeight = textHeight(currentPageText);

  // 打字逻辑：逐个字符显示
  if (millis() > lastMillis + 300 && index < dani.length) {
    index++;
    lastMillis = millis();

    // 文本填满画布时切换新页面
    if (pageHeight > height - 20) { // 预留上下边距
      currentPageStart = index;
      pageHeight = 0;
      background(220); // 清空画布准备新页面
    }
  }
}

关键逻辑说明 #

• currentPageStart 记录当前页面文本起始位置，页面填满后更新为当前索引，开启新页面
• pageHeight 实时计算当前页面文本高度，判断是否需要分页
• 切换页面时调用 background(220) 清空画布，后续从新起始位置绘制剩余文本

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