p5.js 如何冻结画布？答案

【问题标题】：p5.js how to freeze canvas?p5.js 如何冻结画布？
【发布时间】：2018-04-06 09:38:24
【问题描述】：

我尝试做这样的事情：

function setup() {
  createCanvas(500, 250);
  //frameRate(1);
}

function draw() {
  background(50, 50, 150);
  
  translate(10, 10);
  for (let i = 0; i < 30; i++) {
    rect(i*15, 0, 10, random(30, 120));
  }
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"&gt;&lt;/script&gt;

但我想“冻结”这个画布，所以如果我加载页面，我将在 30 到 120 之间的随机高度有 30 个 rect()。

【问题讨论】：

标签： javascript processing p5.js

【解决方案1】：

一种选择是在setup 函数中使用noLoop() 方法，该方法将停止draw 方法循环。

function setup() {
  createCanvas(500, 250);
  noLoop()
}

function draw() {
  background(50, 50, 150);

  translate(10, 10);
  for (let i = 0; i < 30; i++) {
    rect(i * 15, 0, 10, random(30, 120));
  }
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"&gt;&lt;/script&gt;

请注意，使用noLoop 和loop 方法，您可以在某些事件上切换绘制循环，例如mousePressed 像这样。

let stop = true;

function setup() {
  const canvas = createCanvas(500, 250);
  if(stop) noLoop();
  canvas.mousePressed(function() {
    stop = !stop;
    stop ? noLoop() : loop()
  })
}

function draw() {
  background(50, 50, 150);

  translate(10, 10);
  for (let i = 0; i < 30; i++) {
    rect(i * 15, 0, 10, random(30, 120));
  }
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"&gt;&lt;/script&gt;

其他选项是在setup 函数中创建一次条形数组，然后使用draw 方法显示它们。这样您就不必停止draw 循环。

const bars = []
class Bar {
  constructor(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
  }
  show() {
    rect(this.x, this.y, this.w, this.h);
  }
}

function setup() {
  createCanvas(500, 250);
  for (let i = 0; i < 30; i++) {
    bars.push(new Bar(i * 15, 0, 10, random(30, 120)))
  }
}

function draw() {
  background(50, 50, 150);
  translate(10, 10);
  bars.forEach(bar => bar.show())
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"&gt;&lt;/script&gt;

【讨论】：

感谢您的回复：D
不客气，注意你也可以像这样切换循环jsfiddle.net/tvj04wym/7
不错的答案。第三种选择是使用createGraphics() 函数创建一个缓冲区，然后绘制一次。

【解决方案2】：

因为我一直在寻找一种方法来简单地冻结画布，而这篇文章是第一个出现的，我想我把解决方案留在这里。

您可以将其与矩形数量的额外增量器一起使用，然后触发 noLoop()

来自the p5 docs

按住任意鼠标按钮冻结画布

function mousePressed() {
  noLoop();
}

function mouseReleased() {
  loop();
}

【讨论】：

【解决方案3】：

解决方案是设置另一个为空的绘图函数。我不确切知道 p5 是如何工作的，也许他们无论如何都会清除画布。但这里有一个可能的解决方案：

function draw() {
    //drawing stuff
}

function freezeCanvas() {
    draw = function(){}
}

【讨论】：