p5.js中get()获取的p5.Image因pixelDensity问题绘制模糊如何解决

p5.js 默认会自动适配设备像素密度，在高DPI屏幕上画布的实际物理像素尺寸会是你设置的逻辑尺寸的2~3倍。你调用get()获取的快照本身已经适配了当前像素密度，但后续调用image(im, 0, 0, L, L)时手动指定了渲染宽高为逻辑尺寸L，相当于把高密度的快照强制压缩/拉伸到逻辑尺寸渲染，导致像素模糊。
设置pixelDensity(1)虽然能统一像素密度规避缩放问题，但会让整个画布放弃高DPI适配，导致整体画面模糊。

最简单的修复方式是调用image()渲染快照时不手动指定宽高，p5会自动按照快照原始的像素密度适配渲染，完全匹配你捕获时的清晰度：
将原有代码里的

image(im, 0, 0, L, L)

修改为

image(im, 0, 0)

即可，不需要修改全局像素密度，也不会导致整个画布整体模糊。

如果你的业务场景需要手动指定渲染尺寸，可以在捕获快照时主动同步快照的像素密度和主画布一致：

let im = get()
im.pixelDensity(pixelDensity())
history.push(im)

该场景下再指定渲染宽高也不会出现模糊问题。

let L = 400
let history, iter, x

function init() {
  history = []
  iter = 0
  x = 0
}

function writeText() {
  textSize(25)
  textFont("Courier New")
  fill(0)
  text("fuzzy wuzzy", x, L/2)
  textSize(15)
  text("why though???", x, L/3)
}

function setup() {
  createCanvas(L, L)
  frameRate(60)
  init()
}

function draw() {
  background(220);
  iter += 1
  
  if (iter < 100) {
    x += L/700
    writeText()
    
    let im = get()
    history.push(im) 
  }
  else {
    if (history.length === 0) {
      init()
    } else {
      im = history.pop()
      image(im, 0, 0)  
    }
  }
}

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