如何实现可在主画布或createGraphics实例上绘图的函数？

在p5.js中，主画布的绘图依赖全局函数（如fill()、rect()），而createGraphics()返回的是带自有绘图方法的Graphics实例，直接传递createCanvas()的返回值（DOM元素）会报错，因为它没有这些绘图方法。以下是两种简洁的实现方案：

方案一：创建主画布适配对象 #

手动封装全局绘图方法到一个对象，让它和Graphics实例拥有完全一致的API，通用绘图函数可以直接统一调用：

// 适配主画布的上下文对象，按需添加需要的绘图方法
const mainCanvasCtx = {
  fill: (color) => fill(color),
  rect: (x, y, w, h) => rect(x, y, w, h),
  stroke: (color) => stroke(color),
  line: (x1, y1, x2, y2) => line(x1, y1, x2, y2),
  ellipse: (x, y, w, h) => ellipse(x, y, w, h)
};

// 通用绘图函数，接收统一的上下文参数
function drawComplexShape(ctx) {
  ctx.fill('#ff3366');
  ctx.rect(30, 30, 120, 120);
  
  ctx.stroke('#3366ff');
  ctx.line(30, 30, 150, 150);
  
  ctx.fill('#ffff00');
  ctx.ellipse(90, 90, 60, 60);
}

function setup() {
  createCanvas(400, 400);
  
  // 用主画布绘制
  drawComplexShape(mainCanvasCtx);
  
  // 用createGraphics实例绘制
  const pg = createGraphics(200, 200);
  drawComplexShape(pg);
  image(pg, 150, 150); // 将graphics内容画到主画布
}

方案二：在绘图函数内自动适配上下文 #

如果不想维护适配对象，可以在通用函数内部判断是否传入了Graphics实例，动态绑定对应的绘图方法：

// 通用绘图函数，ctx可选，默认用主画布全局方法
function drawComplexShape(ctx) {
  // 绑定对应的绘图方法
  const fill = ctx ? ctx.fill.bind(ctx) : window.fill;
  const rect = ctx ? ctx.rect.bind(ctx) : window.rect;
  const stroke = ctx ? ctx.stroke.bind(ctx) : window.stroke;
  const line = ctx ? ctx.line.bind(ctx) : window.line;
  const ellipse = ctx ? ctx.ellipse.bind(ctx) : window.ellipse;

  fill('#ff3366');
  rect(30, 30, 120, 120);
  
  stroke('#3366ff');
  line(30, 30, 150, 150);
  
  fill('#ffff00');
  ellipse(90, 90, 60, 60);
}

function setup() {
  createCanvas(400, 400);
  
  // 用主画布绘制（不传ctx参数）
  drawComplexShape();
  
  // 用createGraphics实例绘制
  const pg = createGraphics(200, 200);
  drawComplexShape(pg);
  image(pg, 150, 150);
}

关键说明 #

• createCanvas()返回的是DOM canvas元素，而非p5的绘图上下文对象，因此不能直接用来调用绘图方法。
• 两种方案都避免了大量分支判断，让复杂绘图逻辑可以在同一套代码中复用，同时支持主画布和createGraphics实例两种场景。

内容的提问来源于stack exchange，提问作者Pierpaolo