p5.js入门学习-noLoop

195 阅读1分钟

noLoop()函数会使draw()函数只执行一次。

如果不调用noLoop()函数,draw()函数会循环执行,直至程序被停止。

image.png

let y = 100;
// 程序开始时,setup() 函数中的语句执行一次。
function setup() {
  // 创建 720 * 400 大小的画布
  createCanvas(720, 400);
  // 将线条绘制颜色设置为白色
  stroke(255); 
  // draw()函数只执行一次
  noLoop();
  y = height * 0.5;
}
// draw() 中的语句一直执行到程序停止为止。每个语句都按顺序执行,并且在读取最后一行之后,将再次执行第一行。
function draw() {
  // 将背景设置为黑色
  background(0);
  // 每循环一次,y的坐标就-1
  y = y - 1;
  // 当y的值小于0后,重新将其设置为画布高度
  if (y < 0) {
    y = height;
  }
  line(0, y, width, y);
}
new p5();