绘制p5 text元素后能否不重绘整个画布修改其位置？如何实现？

核心结论 #

默认使用text()接口绘制到Canvas上的文本，无法直接修改已绘制内容的位置：p5.js的2D画布采用即时渲染模式，绘制完成的文本会被转为像素点阵，不存在可单独操作的元素实例。
如果不需要重绘整个画布，可使用以下两种实现方案：

方案1：使用DOM文本元素（无画布重绘开销，性能最优） #

该方案创建独立的HTML文本节点，和Canvas图层分离，可直接修改坐标，不需要操作画布：

• 初始化阶段调用createSpan()/createDiv()创建文本元素，设置为绝对定位
• 玩家移动时直接调用文本元素的position()方法更新坐标即可
  参考代码：

let playerLabel;
function setup() {
  createCanvas(800, 600);
  // 初始化玩家文本
  playerLabel = createSpan('当前玩家');
  playerLabel.style('color', '#fff');
  playerLabel.style('font-size', '16px');
  // 初始定位到玩家初始位置下方
  playerLabel.position(player.x, player.y + 35);
}

// 你已配置的玩家移动触发逻辑中直接调用即可
function updatePlayerPosition() {
  // player.x、player.y为实时更新的玩家坐标
  playerLabel.position(player.x, player.y + 35);
}

方案2：Canvas局部重绘（仅刷新文本所在区域，无需重绘全画布） #

如果文本必须绘制在Canvas图层内（比如需要和其他Canvas元素做层级叠加、蒙版交互等），可以采用局部清屏的方式避免重绘整个画布：

• 提前记录上一次文本的绘制坐标、宽高参数
• 文本需要移动时，先清空上一次文本所在的矩形区域，再在新坐标绘制文本即可
  参考代码：

let lastTextPos = { x: 0, y: 0 };
let textSizeInfo = { w: 0, h: 0 };
const labelText = '当前玩家';

function updatePlayerLabel() {
  // 清空上一次文本的绘制区域
  if (lastTextPos.x !== 0) {
    // 如果画布有背景色，可将clear替换为fill(背景色) + rect()绘制对应区域
    clear(lastTextPos.x, lastTextPos.y - textAscent(), textSizeInfo.w, textSizeInfo.h);
  }
  // 计算新坐标（玩家下方偏移）
  const newX = player.x;
  const newY = player.y + 35;
  // 计算文本宽高用于下次清屏
  textSizeInfo.w = textWidth(labelText);
  textSizeInfo.h = textAscent() + textDescent();
  // 绘制新文本
  text(labelText, newX, newY);
  // 保存当前坐标
  lastTextPos.x = newX;
  lastTextPos.y = newY;
}

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