如何在Chrome浏览器中将p5.js的createCanvas画布原点设为窗口左上角？

嘿，刚接触p5.js就遇到这个坐标系/画布偏移的问题，太懂这种困惑了！我来给你两种解决思路，对应你提到的两种需求：把坐标系原点移到窗口左上角，或者把画布本身移到窗口左上角。

很多时候你看到的偏移其实不是p5.js坐标系的问题，而是浏览器的<body>标签默认自带8px的外边距（margin），导致画布被挤到了窗口内部的(8,8)位置。解决这个很简单：

• 方案A：在HTML里添加基础样式重置
  直接在你的HTML文件里加一段CSS，消除body的默认边距：

  <style>
    body { margin: 0; padding: 0; }
  </style>
  

• 方案B：在p5.js代码里动态设置
  如果你不想改HTML，也可以在setup()函数里直接修改页面样式：

  function setup() {
    createCanvas(windowWidth, windowHeight);
    // 消除body的默认边距
    document.body.style.margin = "0px";
    document.body.style.padding = "0px";
    // 确保画布占满窗口，没有滚动条
    document.body.style.overflow = "hidden";
  }
  

  这样画布就会紧贴窗口左上角，坐标系的(0,0)自然就对应窗口左上角了。

如果确认画布已经在窗口左上角，但坐标系的(0,0)还是偏移了8px，那可以用p5.js的translate()函数来移动坐标系原点：

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(220);
  // 把坐标系原点移到窗口左上角（对应原来的(-8,-8)位置）
  translate(8, 8);
  // 现在画个点试试，(0,0)就是窗口左上角了
  circle(0, 0, 10);
}

translate(x,y)的作用是将整个绘图坐标系的原点移动到当前画布的(x,y)位置，这里我们向右向下各移动8px，刚好抵消原来的偏移，让新的(0,0)对应窗口左上角。

小提示：如果是第一种情况（body默认边距），优先用方法1，因为这是页面布局的问题，调整样式比修改坐标系更合理，后续绘图也不会有额外的偏移需要计算。

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