p5.js入门学习-基本形状

69 阅读1分钟

三角形:triangle(x1, y1, x2, y2, x3, y3) 点1坐标:(x1, y1),点2坐标:(x2, y2),点3坐标:(x3, y3)

矩形:rect(x, y, w, h, tl, tr, br, bl) 左上角坐标:(x, y),矩形宽度:w,矩形高度:h 设置左上角半径:tl,设置右上角半径:tr,设置右下角半径:br,设置左下角半径:bl

四边形:quad(x1, y1, x2, y2, x3, y3, x4, y4) 点1坐标:(x1, y1),点2坐标:(x2, y2),点3坐标:(x3, y3),点4坐标:(x4, y4)

椭圆:ellipse(x, y, w, h) 椭圆圆心坐标:(x, y),椭圆宽度:w,椭圆高度:h

圆弧:arc(x, y, w, h, start, stop) 椭圆弧圆心坐标:(x, y),圆弧宽度:w,圆弧高度:h 弧度角度值(开始):start,弧度角度值(停止):stop

添加图片注释,不超过 140 字(可选)

function setup() {
  // 画布大小:720*400
  createCanvas(720, 400);
  background(0);
  noStroke();
  // 三角形
  fill(204);
  triangle(18, 18, 18, 360, 81, 360);
  // 矩形
  fill(102);
  rect(81, 81, 63, 63);
  // 四边形
  fill(204);
  quad(189, 18, 216, 18, 216, 360, 144, 360);
  // 椭圆
  fill(255);
  ellipse(252, 144, 72, 72);
  // 三角形
  fill(204);
  triangle(288, 18, 351, 360, 288, 360);
  // 圆弧
  fill(255);
  arc(479, 300, 280, 280, PI, TWO_PI);
}
new p5();

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