p5.js代码中阴影出现在图像上方的原因及修复方法

原因分析 #

1. 颜色格式不兼容：drawingContext.shadowColor是原生Canvas 2D上下文的属性，仅支持CSS标准颜色格式（如"rgb(111,0,0)"、"#6f0000"），但你直接传入了p5.js的color()函数返回的自定义Color对象，导致浏览器无法正确解析阴影颜色，引发异常的阴影显示。
2. 阴影作用对象错误：你将阴影设置在了主画布的上下文，但实际要给渐变矩形添加阴影，应该把阴影应用到绘制矩形的createGraphics()创建的graphics对象上下文。主画布的阴影会作用于整个全屏的graphics图像，而非其中的矩形元素，导致阴影位置不符合预期。

修复方案 #

方案一：将阴影应用到graphics对象（推荐）

把阴影属性设置到绘制矩形的graphics上下文，同时正确传递颜色值：

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(255);

  const g = createGraphics(windowWidth, windowHeight);
  // 为graphics上下文设置阴影
  g.drawingContext.shadowOffsetX = 10;
  g.drawingContext.shadowOffsetY = 10;
  g.drawingContext.shadowBlur = 2;
  // 将p5.js Color对象转为原生Canvas可识别的字符串格式
  g.drawingContext.shadowColor = color(111, 0, 0).toString();
  
  addGradientRect(g, 10, 10, 40, 40, "#000", "#555");
  image(g, 0, 0);
}

function addGradientRect(graphics, x, y, width, height, from, to) {
  const p = graphics;
  p.noFill();
  for (let ty = 0; ty < height; ty++) {
    const inter = p.map(ty, 0, height, 0, 1);
    const c = p.lerpColor(p.color(from), p.color(to), inter);
    p.stroke(c);
    p.line(x, y + ty, x + width, y + ty);
  }
}

方案二：修正主画布的阴影颜色格式

如果坚持在主画布设置阴影，只需将阴影颜色改为CSS标准格式：

function draw() {
  background(255);
  drawingContext.shadowOffsetX = 10;
  drawingContext.shadowOffsetY = 10;
  drawingContext.shadowBlur = 2;
  // 使用CSS颜色字符串替代p5.js Color对象
  drawingContext.shadowColor = "rgb(111, 0, 0)";

  const g = createGraphics(windowWidth, windowHeight);
  addGradientRect(g, 10, 10, 40, 40, "#000", "#555");
  image(g, 0, 0);
}

效果说明 #

修复后，阴影会按照shadowOffsetX（向右）和shadowOffsetY（向下）的设置，正确显示在渐变矩形的右下方。

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