p5.js入门学习-setup与draw

83 阅读1分钟

setup函数为启动函数,只执行一次。

draw函数为绘图函数,会一直循环执行指导程序停止,速度:60帧/秒。

图63.gif

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

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