p5.js | 高度变量

在p5.js中，高度变量用于控制绘制画布的高度。它可以通过设置height变量的值来改变画布的高度。

设置画布高度

以下代码演示了如何设置画布的高度：

function setup() {
  createCanvas(400, 400);
  height = 600; // 设置画布高度为600像素
}

function draw() {
  background(220);
  // 绘制你的图形
}

在setup()函数中，createCanvas()函数被用来创建一个宽度为400像素、高度为400像素的画布。然而，在下一行代码中，height变量被设置为600，导致画布高度改变为600像素。当draw()函数运行时，它将绘制在新的更高的画布上。

保持纵横比例

在某些情况下，你可能想要保持画布的纵横比例。这可以通过计算画布宽高比并将其应用于高度变量来实现。以下代码展示了如何计算宽高比并设置画布的大小：

function setup() {
  const canvasWidth = 400;
  const canvasHeight = canvasWidth / 1.6; // 宽高比为1.6:1
  createCanvas(canvasWidth, canvasHeight);
  height = canvasHeight; // 设置高度变量
}

function draw() {
  background(220);
  // 绘制你的图形
}

在这个示例中，画布的宽度是400像素，宽高比为1.6:1。高度是通过将宽度除以宽高比来计算得出的，然后将高度变量设置为计算出的高度。这样，在draw()函数中绘制的图形将始终在保持1.6:1宽高比的画布上。

总结

通过使用高度变量，你可以轻松地改变画布的高度，这为你的p5.js项目提供了更多的设计灵活性。在此简要介绍了如何设置画布高度并保持纵横比例。现在你可以开始尝试使用高度变量在p5.js上设计令人惊叹的图形了！