如何将p5js按钮对象的位置设置为相对于画布的(0.0)坐标？

这个需求完全可以实现，核心原因是p5中通过createButton创建的按钮本质是原生HTML DOM元素，定位遵循CSS文档流规则，和canvas自身的内部坐标系相互独立，只要通过坐标偏移计算或者调整基础布局，就能让按钮精准对齐到画布的任意坐标系位置。

为什么默认设置会出现位置错位 #

p5 Web Editor 默认会给创建的画布加上居中布局样式，画布本身不会贴到预览区域的左上角位置；但按钮的position(x,y)方法默认是以预览区域文档的左上角为原点定位，所以当你把按钮设为(0,0)时，就会出现在画布外的网页左上角，和画布原点错开。

可落地的实现方法 #

方法1：对齐画布基础位置（最简单） #

直接消除画布自身的默认居中偏移，让画布本身就和预览区域的文档原点重合：

• 创建画布时把画布对象存为变量，方便后续控制定位
• 创建画布后立刻调用画布的position方法，把画布本身移到预览区的(0,0)位置
• 这时候再创建按钮，设置按钮位置为(0,0)，就会和画布的(0,0)完全重合

对应示例代码：

let cnv;
let testBtn;

function setup() {
  // 保存画布对象引用
  cnv = createCanvas(400, 400);
  // 把画布自身移到预览区左上角，消除默认居中的偏移
  cnv.position(0, 0);
  background(220);

  // 创建按钮，设置位置为(0,0)即可和画布原点对齐
  testBtn = createButton('测试按钮');
  testBtn.position(0, 0);
}

方法2：动态偏移计算（适配原有画布布局） #

如果你不想改动画布现有的居中、固定边距布局，只是希望按钮对齐到画布的指定坐标，可以通过DOM边界值计算实际偏移量实现，无论画布在页面哪个位置都能精准对齐：

• 创建画布后，通过getBoundingClientRect()获取画布相对当前视口的真实位置
• 计算画布原点对应的文档级坐标（叠加页面滚动值，避免滚动后错位）
• 把想要放置的画布内坐标值和偏移值相加，设置为按钮的实际定位值
• 在窗口尺寸变化、页面滚动的事件中重新计算偏移，避免位置漂移

对应示例代码：

let cnv;
let testBtn;
// 想要按钮放置在画布内的坐标值
const TARGET_CANVAS_X = 0;
const TARGET_CANVAS_Y = 0;

function setup() {
  cnv = createCanvas(400, 400);
  background(220);
  testBtn = createButton('测试按钮');
  // 初始对齐按钮到目标画布坐标
  alignBtnToTarget();
}

function alignBtnToTarget() {
  // 获取画布相对视口的边界信息
  const canvasRect = cnv.elt.getBoundingClientRect();
  // 计算对应的文档坐标（叠加滚动偏移）
  const realBtnX = canvasRect.left + window.scrollX + TARGET_CANVAS_X;
  const realBtnY = canvasRect.top + window.scrollY + TARGET_CANVAS_Y;
  testBtn.position(realBtnX, realBtnY);
}

// 窗口尺寸变化时重新对齐，避免位置偏移
function windowResized() {
  alignBtnToTarget();
}

// 页面滚动时实时检查对齐状态
function draw() {
  const canvasRect = cnv.elt.getBoundingClientRect();
  const expectedX = canvasRect.left + window.scrollX + TARGET_CANVAS_X;
  const expectedY = canvasRect.top + window.scrollY + TARGET_CANVAS_Y;
  // 仅在位置出现偏差时触发重算，减少不必要的性能消耗
  const currentPos = testBtn.position();
  if (currentPos.x !== expectedX || currentPos.y !== expectedY) {
    alignBtnToTarget();
  }
}

注意事项 #

• 按钮的定位是基于画布在屏幕上的物理像素位置，如果画布内部做了translate、scale等坐标变换，需要把变换产生的偏移量也加入计算逻辑，才能对齐到变换后的画布内部坐标
• 不要把按钮和canvas内部绘制的图形定位逻辑混为一谈，DOM元素永远遵循CSS盒模型的定位规则，不会自动继承canvas内部的坐标变换

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