p5.js入门学习-createGraphics

此函数可以帮助你创建并返回一个新的p5.Renderer对象。

let pg;
// 创建一个画布+一个图形缓冲区
function setup() {
  createCanvas(710, 400);
  pg = createGraphics(400, 250);
}
function draw() {
  // 大矩形中椭圆的残影是由这个fill实现的，这里我们先不做介绍，如果你有想法的话，可以评论区回复。
  fill(0, 12);
  // 绘制矩形，width和height为canvas画布的大小
  rect(0, 0, width, height);
  // 在鼠标处绘制一个白色的圆
  fill(255);
  noStroke();
  ellipse(mouseX, mouseY, 60, 60);
  // 此为小矩形的背景色
  pg.background(51);
  pg.noFill();
  pg.stroke(255);
  // 小矩形中的椭圆做了一定的偏移，[(710-400)/2=155，(400-250)/2=75]
  // 原因是mouseX和mouseY是canvas中鼠标的坐标位置，而我们下面又通过image函数，将pg的起点移动到了 (155, 75) 这个坐标上，所以此处也需要做一下偏移
  pg.ellipse(mouseX - 155, mouseY - 75, 60, 60);
  //image 函数的用法会在后面的教程中给大家进行介绍，pg为资源，155, 75是定位信息，还有两个参数是图片大小，不写就表示保持原图大小，即400 x 250
  image(pg, 155, 75);
}
new p5();

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