使用translate()将原点平移到中心。使用scale翻转y轴：

function draw() {
    translate(width/2, height/2); 
    scale(1, -1);

    // [...] 
}

width和height是画布的宽度和高度。
translate(width/2, height/2)将所有内容移动半宽和半高。它将场景的对象从左上角移动到画布的中心。
这种方法将导致该文本被翻转。要再次“取消翻转”文本，必须将每个文本插入到一个push()/pop()块中，以反转翻转：：

push();
scale(1, -1); // reverse the global flip
text(...);
pop();

除了平移 origin 和翻转 y 轴之外，我还在寻找“世界坐标”（场景的坐标，与画布的像素尺寸无关）。
我想添加一些改进来满足我的特定需求：
1.设置一些单词坐标变量：

let worldWidth = 640
let worldHeight = 400
let worldAspect = (worldHeight/worldWidth);

1.在setup()中，将画布调整到窗口的宽度，但保持世界的纵横比：

function setup() {
  createCanvas(windowWidth, windowWidth * worldAspect);
}

1.开始draw()开始，将 origin 翻译到左下角。要使用世界坐标，可以缩放画布height和width，除以世界坐标（记住也要使用负height垂直翻转）：

function draw() {
  translate(0, height);
  scale(width / worldWidth, -height / worldHeight);

  # ...
}

1.对于取消翻转文本，如果您需要经常这样做，请编写一个函数，该函数将text（） Package 起来以临时取消翻转：

function wText(message, x, y, size) {
  push();
  scale(1, -1);
  textSize(size);
  text(message, x, -y);
  pop();
}

这保持了世界坐标的缩放，因为连续调用scale（）是 * 累积的 *。这也是为什么我们想扩大规模。
1.现在我们可以考虑世界坐标，origin 在左下角，垂直的 y 轴 * 向上 *。例如，无论窗口和画布的大小如何，这将始终以正确的方式在右上角绘制“hi”，并在中心绘制一个中等大小的真实圆：

wText("hi", 580, 350, 50);
circle(320, 200, 80);

注意，使用世界坐标意味着我们不再需要基于width和height计算像素位置：scale会处理这个问题。

1. mouseX和mouseY变量始终包含鼠标的 * 设备像素 * 位置：没有缩放或平移。要解决此问题，请再定义两个函数：

function wMouseX() {
  return mouseX * (worldWidth / width)
}

function wMouseY() {
  return worldHeight - (mouseY * (worldHeight / height))
}

你可以用下面的代码来测试，显示鼠标坐标（像素）和它们的世界坐标（缩放和平移的点）：

wText(" x:\t" + round(mouseX), 0, 40);
wText(" y:\t" + round(mouseY), 0, 20);

wText("wX:\t" + wMouseX(), 200, 40);
wText("wY:\t" + wMouseY(), 200, 20);

fill("red");
circle(wMouseX(), wMouseY(), 15);