如何在p5.js中实现草图像素化？调pixelDensity(0.1)后模糊

直接设置pixelDensity(0.1)会触发浏览器自动插值放大，导致画面模糊。想要清晰的像素化效果，最简便的方法是先在低分辨率画布上绘制内容，再放大到窗口尺寸，配合CSS的像素化渲染属性避免模糊，完全不需要修改p5.js库。

具体实现步骤： #

1. 用createGraphics()创建一个低分辨率的离屏画布，尺寸根据你想要的像素块大小调整——比如想要8x8的像素块，就把离屏画布设为窗口尺寸除以8的数值。
2. 所有游戏绘制逻辑都在这个离屏画布上执行。
3. 最后将离屏画布放大绘制到主画布，并给主画布添加image-rendering: pixelated样式，确保放大时像素边缘锐利无模糊。

完整示例代码： #

let pixelCanvas;
const scaleFactor = 8; // 像素缩放倍数，数值越大像素块越明显
const baseWidth = 100; // 离屏画布基础宽度
const baseHeight = 75; // 离屏画布基础高度

function setup() {
  // 主画布尺寸是离屏画布的scaleFactor倍
  createCanvas(baseWidth * scaleFactor, baseHeight * scaleFactor);
  // 创建低分辨率离屏画布
  pixelCanvas = createGraphics(baseWidth, baseHeight);
  // 开启像素化渲染，防止放大时模糊
  document.querySelector('canvas').style.imageRendering = 'pixelated';
}

function draw() {
  // 所有绘制操作都在pixelCanvas上进行
  pixelCanvas.background(20);
  pixelCanvas.fill(255, 100, 100);
  // 鼠标坐标要除以缩放倍数，匹配离屏画布的坐标系统
  pixelCanvas.rect(mouseX / scaleFactor, mouseY / scaleFactor, 4, 4);
  
  // 将离屏画布放大绘制到主画布
  image(pixelCanvas, 0, 0, width, height);
}

额外说明： #

• 如果不想手动计算坐标，也可以在离屏画布中使用scale(scaleFactor)，但这样绘制的元素尺寸也要对应调整，不如直接缩放画布直观。
• 若只是想给现有草图快速添加像素化效果，也可以直接给主画布添加image-rendering: pixelated样式，再结合pixelDensity(1)，但这种方式不如离屏画布的像素块效果可控。

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