p5.js入门学习-宽度与高度

宽度：width
高度：height

这两个参数可以自动获取画布大小。

function setup() {
  createCanvas(720, 400);
}
function draw() {
  // 背景色是灰色
  background(127);
  noStroke();
  // height 为画布高度，每20个像素做一次绘图
  for (let i = 0; i < height; i += 20) {
    // 设置填充色，并绘制矩形，左上角坐标为(0, i)，右下角坐标为(width, 10)
    fill(129, 206, 15);
    rect(0, i, width, 10);
    // 将填充色改为白色，并绘制矩形，左上角坐标(i, 0)，右小角坐标为(10, height)
    fill(255);
    rect(i, 0, 10, height);
  }
}
new p5();

可以注意到，height与width并没有在程序中被定义过，但是其可以自动获取到画布大小。

关注我学习更多p5.js入门教程。

p5js 开源社区 - 乐述云享 (aleshu.com)