performance - Processing.js：如何仅绘制（）部分画布以减少 CPU 使用率

Question

现在我有一个 html 页面，它呈现 20 个画布，每个画布都有自己的 processing.js 脚本实例。为了减少 CPU 使用率，我只有鼠标悬停在图形上的 mouseover/out 事件才能循环（）/noLoop（）。

但我需要更进一步。现在的画布是 300x400，其中有一个 300x300 的空间需要一直动态绘制，但是有一个带有图例的矩形，其余的空间实际上不需要使用 framerate() 重绘休息。

有没有人知道从本质上指定 draw() 函数要重绘哪些像素的方法？

Answer 1

我很确定 100x300 的空白区域不会显着增加计算量。但你当然可以通过绘制类似的东西：

if(frameCount==1) [draw legend code];

或if(frameCount % 30 == 0)...用于连续但不太频繁的渲染。

---

编辑：

void setup(){
  size(400,400);
  noStroke();
  background(255);
}

void draw(){
  fill(255,255,255,50);
  rect(0, 150, width, height-150);

  if(frameCount%50 == 1) {
    fill(255);
    rect(0, 0, width, 150);
    fill(0);
    text("frame " + frameCount, width/2, 75);
  }
  fill(255,0,0);
  ellipse(random(0, width), random(150, height), 10, 10);
}