同一P5.js代码在Windows10电脑与Android手机上运行结果不一致

问题代码 #

function setup() {  
  createCanvas(300, 300);      
  randomSeed(1);
  for (let x2=0; x2<width; x2 +=100) { 
    for (let y2=0; y2<height; y2 += 100) {       
      fill(random(200),random(55),random(155));    
      rect(x2,y2,100,100);     
    }
  }
  ///////
  loadPixels();
  background(255); 
  for (let y1=0; y1<height; y1+=100) {    
    for (let x1=0; x1<width; x1+=100) {      
      let poz=(x1+y1*width)*4;        
      let r=pixels[poz];
      let g=pixels[poz+1];
      let b=pixels[poz+2];     
      fill(r,g,b);            
      rect(x1,y1,100,100);    
    }  
  }
  //////////    
}

差异原因 #

核心问题在于不同设备浏览器的渲染线程与JS线程同步机制不同：

• Windows 10桌面浏览器中，setup()内的rect绘制操作会在JS执行间隙立即提交到画布渲染，调用loadPixels()时能正确捕获到之前绘制的矩形像素数据。
• Android手机浏览器为优化性能，会延迟渲染队列中的绘制操作，直到当前JS任务执行完毕才批量渲染。这导致loadPixels()调用时，之前的矩形还未实际渲染到画布，读取到的是画布初始状态的像素数据，而非预期的彩色矩形像素。

解决办法 #

方法1：改用draw()函数实现逻辑拆分 #

将像素读取和后续绘制放到draw()中，利用draw()的执行时机（setup()渲染完成后触发）保证像素数据正确，并用noLoop()确保只执行一次：

function setup() {  
  createCanvas(300, 300);      
  randomSeed(1);
  // 先绘制初始矩形
  for (let x2=0; x2<width; x2 +=100) { 
    for (let y2=0; y2<height; y2 += 100) {       
      fill(random(200),random(55),random(155));    
      rect(x2,y2,100,100);     
    }
  }
  noLoop(); // 只执行一次draw
}

function draw() {
  loadPixels();
  background(255); 
  for (let y1=0; y1<height; y1+=100) {    
    for (let x1=0; x1<width; x1+=100) {      
      let poz=(x1+y1*width)*4;        
      let r=pixels[poz];
      let g=pixels[poz+1];
      let b=pixels[poz+2];     
      fill(r,g,b);            
      rect(x1,y1,100,100);    
    }  
  }
}

方法2：直接存储颜色数据（更可靠） #

避免依赖画布渲染后的像素读取，提前存储每个方块的颜色值，后续直接复用，彻底规避渲染同步问题：

function setup() {  
  createCanvas(300, 300);      
  randomSeed(1);
  let blockColors = [];
  
  // 先存储每个方块的颜色，同时绘制初始矩形
  for (let x2=0; x2<width; x2 +=100) { 
    for (let y2=0; y2<height; y2 += 100) {       
      let r = random(200);
      let g = random(55);
      let b = random(155);
      blockColors.push({r, g, b});
      fill(r, g, b);    
      rect(x2,y2,100,100);     
    }
  }
  
  background(255); 
  // 复用存储的颜色绘制
  let idx = 0;
  for (let y1=0; y1<height; y1+=100) {    
    for (let x1=0; x1<width; x1+=100) {      
      let color = blockColors[idx];
      fill(color.r, color.g, color.b);            
      rect(x1,y1,100,100);
      idx++;    
    }  
  }
}

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