此函数可以帮助你创建并返回一个新的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();
