为什么这段 p5.js 代码中图像上方会出现阴影？

Question

我尝试使用 p5.js 在图像下方绘制阴影效果，但阴影出现在图像上方。这是我的代码：

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

function draw() {
  background(255);
  drawingContext.shadowOffsetX = 10;
  drawingContext.shadowOffsetY = 10;
  drawingContext.shadowBlur = 2;
  drawingContext.shadowColor = color(111, 0, 0);

  const g = createGraphics(windowWidth, windowHeight);
  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);
  }
}

我将shadowOffsetX和shadowOffsetY属性设置为正值，这应该分别将阴影放置在图像的右侧和下方。然而，阴影反而出现在图像上方。

有人可以解释为什么会发生这种情况以及如何修复它以使阴影出现在图像下方吗？

如果您希望我进一步修改或扩展摘要，请告诉我。

在线编辑器：https://editor.p5js.org

Answer 1

您可以发布您所看到的屏幕截图吗？对我来说，阴影出现在渐变矩形的下方和右侧：

请注意，棕色矩形是阴影（来自drawingContext.shadowColor = color(111, 0, 0);），而深灰色透明（看起来有阴影）矩形是gradientRect。