p5.js入门学习-坐标

绘制在画布上的所有形状都需要指定一个坐标位置，单位：像素，数值：相对于原点的距离。

原点[0, 0]在乐述云享中并不是窗口左上角，而是文本显示位置的左上角。

若需要以窗口左上角作为原点，也是有方法的，我们会在后续教程中逐步开放给大家。

接下来让我们看一个案例：

function setup() {
  // 制作一个 720 * 400 的画布。
  createCanvas(720, 400);
}
function draw() {
  // 将背景设置为黑色，关闭填色功能。
  background(0);
  noFill();
  stroke(255);
  // point() 函数的两个参数分别为指定的坐标。
  // 第一个参数是 x 坐标，第二个参数是 y 坐标。
  point(width * 0.5, height * 0.5);
  point(width * 0.5, height * 0.25);
  stroke(0, 153, 255);
  // 坐标用于绘制所有形状，而不仅仅是点。
  // 不同功能的参数用于不同的目的。例如，line() 的前两个参数指定第一个端点的坐标，后两个参数指定第二个端点的坐标。
  line(0, height * 0.33, width, height * 0.33);
  stroke(255, 153, 0);
  // 默认情况下，rect() 的前两个参数是左上角的坐标，后两个参数是宽度和高度。
  rect(width * 0.25, height * 0.1, width * 0.5, height * 0.8);
}
new p5();