📌  相关文章
📜  p5.js 环境完整参考(1)

📅  最后修改于: 2023-12-03 15:18:12.757000             🧑  作者: Mango

P5.js 环境完整参考

简介

P5.js 是一款基于 Processing 语言的 JavaScript 库，能够帮助程序员简化 Web 开发中的图像处理等任务，让用户更加专注于自身的业务逻辑和创意。P5.js 提供了丰富的图形、声音和交互等功能，易于上手。

开始使用 P5.js

要使用 P5.js 库，可在 HTML 文件中添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/addons/p5.sound.min.js"></script>
  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

其中， p5.min.js 是 P5.js 库；p5.dom.min.js 和 p5.sound.min.js 则是 P5.js 的扩展库，提供了 HTML 元素和声音等功能。

在 HTML 文件中的 script 标签内， 直接编写 P5.js 代码即可。 此处为示例模板：

<!DOCTYPE html>
<html>
  <head>
    <title>My P5.js Sketch</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/addons/p5.sound.min.js"></script>
  </head>
  <body>
    <script>
      function setup() {
        createCanvas(400, 400);
      }

      function draw() {
        background(220);
      }
    </script>
  </body>
</html>

在 setup() 函数内，可以初始化 Canvas；在 draw() 函数内，可以进行一些绘制操作。

P5.js 常用 API

在 P5.js 中，提供了丰富的 API，下面是一些常用 API 的简介

常用绘图函数
  • line(x1, y1, x2, y2)：画线
  • rect(x, y, w, h)：画矩形
  • ellipse(x, y, w, h)：画椭圆
  • arc(x, y, w, h, start, stop, [mode])：画弧线
  • triangle(x1, y1, x2, y2, x3, y3)：画三角形
  • quad(x1, y1, x2, y2, x3, y3, x4, y4)：画四边形
  • point(x, y)：画点
  • curve(x1, y1, x2, y2, x3, y3, x4, y4)：画曲线
  • beginShape()、vertex(x, y)、endShape()：画复杂图形
  • text(text, x, y)：画文字
常用图形属性
  • fill(color)：设置填充颜色
  • noFill()：取消填充颜色
  • stroke(color)：设置描边颜色
  • noStroke()：取消描边
  • strokeWeight(w)：设置描边粗细
  • textAlign(alignX, [alignY])：设置文字位置对齐方式
  • textSize(size)：设置文字大小
  • background([r], [g], [b], [a])：设置背景色
常用输入输出函数
  • loadImage(path, callback)：加载图片
  • loadSound(path, callback)：加载音频
  • createCanvas(w, h)：创建画布
  • createGraphics(w, h)：创建一个离屏渲染缓存区
  • saveCanvas(name, [extension])：保存画布为图片
  • saveFrames([name], [extension], [framerate], [renderer])：保存动画为图片序列
  • print()：在控制台打印信息
  • alert()：弹出提示框
  • confirm()：弹出确认框
  • prompt()：弹出输入框
常用动画函数
  • draw()：绘制函数，每秒执行 60 次
  • frameRate(fps)：设置帧率
  • noLoop()：停止动画运行
  • loop()：恢复动画运行
  • random([min], [max])：返回指定范围内的随机数
  • noise(x, [y], [z])：返回指定坐标的噪声值
常用交互函数
  • mousePressed()：鼠标按下事件
  • mouseReleased()：鼠标释放事件
  • mouseMoved()：鼠标移动事件
  • mouseDragged()：鼠标拖动事件
  • keyPressed()：键盘按下事件
  • keyReleased()：键盘释放事件
总结

以上就是 P5.js 的完整参考，帮助想学习 P5.js 的程序员快速上手，开发出优秀的 Web 应用程序。如有需要，可查看 P5.js 官方文档，了解更多 API 和示例。