p5.js |宽度可变

p5.js是一个轻量级的JavaScript库，用于创作基于Web的互动图形和动画。该库为程序员提供了丰富的功能和API，支持交互式可视化。p5.js提供了方便的功能来创建canvas并使其宽度可变。

创建canvas

要在p5.js中创建canvas，可以使用以下代码片段：

function setup() {
  createCanvas(800, 600);
}

此代码将创建一个800x600像素的canvas。这个canvas的宽度和高度是固定的。

宽度可变canvas

要创建宽度可变的canvas，可以使用以下代码片段：

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

在此代码中，我们使用了p5.js提供的windowWidth和windowHeight函数来设置canvas的初始大小。我们还在代码中实现了一个名为“windowResized”的函数，该函数在浏览器窗口大小更改时调用。resizeCanvas函数调整canvas的大小以适应新的窗口大小。

支持移动设备

如果要在移动设备上使用可变宽度的canvas，应该添加以下代码片段来自动旋转canvas和禁用页面的滚动行为：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
  html, body {
    overflow: hidden;
  }
</style>
<script>
  function setup() {
    createCanvas(window.innerWidth, window.innerHeight);
    if (window.DeviceOrientationEvent) {
      window.addEventListener("deviceorientation", function() {
        screen.orientation.lock("landscape");
      });
    }
  }
  function windowResized() {
    resizeCanvas(window.innerWidth, window.innerHeight);
  }
</script>

在此代码片段中，我们添加了一个meta标签以确保页面在移动设备上以正确的比例显示。我们也禁用了页面的滚动行为。最后，我们使用了screen.orientation.lock函数来锁定设备的横向方向，以确保canvas在移动设备上具有正确的宽高比。

小结

p5.js提供了易于使用的功能和API，可用于创建宽度可变的canvas。这使得程序员可以在各种设备上创建交互式的可视化效果。