使用p5.js构建交互式绘图应用：实现可调画笔与颜色选择器-html教程-PHP中文网

使用p5.js构建交互式绘图应用：实现可调画笔与颜色选择器

聖光之護

发布： 2025-09-17 16:13:01

原创

304人浏览过

使用p5.js构建交互式绘图应用：实现可调画笔与颜色选择器

本教程将指导您如何使用p5.js库构建一个功能完善的交互式绘图应用程序。您将学习如何集成颜色选择器、实现鼠标拖动绘图、动态调整画笔大小以及通过键盘命令清空画布，所有这些都将通过p5.js的实例模式进行高效管理，确保代码的模块化和健壮性。

1. 简介：构建交互式绘图工具

p5.js是一个非常适合创建交互式图形和动画的JavaScript库。在本教程中，我们将一步步构建一个简单的绘图应用程序，用户可以使用鼠标进行绘画，通过颜色选择器改变画笔颜色，并通过键盘调整画笔大小或清空画布。我们将采用p5.js的实例模式（Instance Mode）来编写代码，这有助于避免全局变量污染，并允许在同一页面上运行多个p5.js草图。

2. 环境准备

在开始之前，请确保您的HTML文件中引入了p5.js库。您可以通过CDN链接快速引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>p5.js 绘图应用</title>
    <!-- 引入 p5.js 库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>
</head>
<body>
    <script src="sketch.js"></script> <!-- 您的 p5.js 代码将在此文件中 -->
</body>
</html>

登录后复制

在 sketch.js 文件中，我们将编写所有的p5.js逻辑。

3. p5.js 实例模式初始化

为了避免全局变量冲突，我们推荐使用p5.js的实例模式。这意味着您的所有p5.js函数和变量都将封装在一个对象内部。

const sketch = function(p) {
  // 定义全局变量（在sketch实例内部）
  let colorPicker;
  let brushSize = 20;

  // setup() 函数：初始化画布和组件
  p.setup = function() {
    p.createCanvas(600, 600); // 创建一个 600x600 的画布
    colorPicker = p.createColorPicker('red'); // 创建颜色选择器，默认颜色为红色
    colorPicker.position(0, 0); // 将颜色选择器放置在画布左上角
    p.background(220); // 设置画布背景色
  };

  // draw() 函数：在我们的绘图应用中，draw函数不是必需的，因为我们主要依赖鼠标事件。
  // p.draw = function() {
  //   // 留空或用于其他持续性动画
  // };

  // 其他功能函数将在此处定义...
};

// 创建一个新的 p5 实例并运行 sketch
let myp5 = new p5(sketch);

登录后复制

注意事项：

在实例模式中，所有p5.js函数（如 createCanvas, background, fill, ellipse 等）都需要通过 p. 前缀来调用，例如 p.createCanvas()。
colorPicker 和 brushSize 等变量被声明在 sketch 函数的内部，成为该实例的私有变量。

4. 实现鼠标拖动绘图

绘图的核心逻辑在于当鼠标被拖动时在画布上绘制形状。我们将使用 p.mouseDragged 事件监听器来完成此操作。

const sketch = function(p) {
  let colorPicker;
  let brushSize = 20;

  p.setup = function() {
    p.createCanvas(600, 600);
    colorPicker = p.createColorPicker('red');
    colorPicker.position(0, 0);
    p.background(220);
  };

  // 鼠标拖动事件处理函数
  p.mouseDragged = function(e) {
    // 获取颜色选择器当前选中的颜色
    let currentColor = colorPicker.color();
    p.fill(currentColor);   // 设置填充色
    p.stroke(currentColor); // 设置描边色，使画笔边缘更平滑
    // 在鼠标当前位置绘制一个圆形
    // 使用 e.clientX 和 e.clientY 获取鼠标在屏幕上的精确坐标
    p.ellipse(e.clientX, e.clientY, brushSize, brushSize);
  };

  // ... 其他代码
};

let myp5 = new p5(sketch);

登录后复制

关键点：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

p.mouseDragged：这是一个p5.js的事件处理函数，当鼠标在画布上按下并拖动时被调用。
e.clientX, e.clientY：在事件对象 e 中，这两个属性提供了鼠标相对于浏览器视口的X和Y坐标。这比全局的 p.mouseX, p.mouseY 更可靠，尤其是在处理复杂的布局时。
colorPicker.color()：这是获取颜色选择器当前选中颜色的正确方法。直接使用 colorPicker 对象作为颜色参数是无效的。
p.fill() 和 p.stroke()：分别设置绘制形状的填充色和描边色。这里我们将它们都设置为画笔颜色，以实现实心画笔效果。

5. 添加键盘控制功能

为了增强交互性，我们将添加键盘快捷键来调整画笔大小和清空画布。我们将使用 p.keyPressed 事件处理函数。

const sketch = function(p) {
  let colorPicker;
  let brushSize = 20;

  p.setup = function() {
    p.createCanvas(600, 600);
    colorPicker = p.createColorPicker('red');
    colorPicker.position(0, 0);
    p.background(220);
  };

  p.mouseDragged = function(e) {
    let currentColor = colorPicker.color();
    p.fill(currentColor);
    p.stroke(currentColor);
    p.ellipse(e.clientX, e.clientY, brushSize, brushSize);
  };

  // 键盘按下事件处理函数
  p.keyPressed = function(e) {
    let key = e.key; // 获取按下的键的字符表示

    if (key === '=') { // 按下 '=' 键，画笔尺寸增大10%
      brushSize += brushSize * 0.1;
    } else if (key === '-') { // 按下 '-' 键，画笔尺寸减小10%
      brushSize -= brushSize * 0.1;
    } else if (key === 'c' || key === 'C') { // 按下 'c' 或 'C' 键，清空画布
      p.clear(); // p.clear() 是清空画布最直接有效的方法
      p.background(220); // 清空后重新设置背景色
    }
  };

  // ... 其他代码
};

let myp5 = new p5(sketch);

登录后复制

关键点：

p.keyPressed：当任何键被按下时调用。
e.key：事件对象 e 的 key 属性提供了按下的键的字符串表示（例如 "a", "Enter", "="）。这比 keyCode 更易读和通用。
brushSize += brushSize * 0.1;：实现画笔尺寸按比例增减。
p.clear()：这是p5.js提供的一个非常方便的函数，用于清空整个画布。清空后，为了保持背景色，我们再次调用 p.background(220)。

6. 完整代码示例

将以上所有代码片段组合在一起，形成完整的 sketch.js 文件：

// sketch.js
const sketch = function(p) {

  let colorPicker; // 颜色选择器对象
  let brushSize = 20; // 画笔初始大小

  // setup() 函数：p5.js 程序启动时执行一次
  p.setup = function() {
    p.createCanvas(600, 600); // 创建一个 600x600 像素的画布
    colorPicker = p.createColorPicker('red'); // 创建颜色选择器，默认颜色为红色
    colorPicker.position(0, 0); // 将颜色选择器放置在画布左上角 (0,0)
    p.background(220); // 设置画布的初始背景色为浅灰色
  };

  // keyPressed() 函数：当任何键盘键被按下时执行
  p.keyPressed = function(e) {
    let key = e.key; // 获取按下的键的字符表示

    if (key === '=') { // 如果按下的是 '=' 键
      brushSize += brushSize * 0.1; // 画笔大小增加10%
    } else if (key === '-') { // 如果按下的是 '-' 键
      brushSize -= brushSize * 0.1; // 画笔大小减少10%
    } else if (key === 'c' || key === 'C') { // 如果按下的是 'c' 或 'C' 键
      p.clear(); // 清空整个画布
      p.background(220); // 重新设置背景色，以避免透明背景
    }
  };

  // mouseDragged() 函数：当鼠标在画布上按下并拖动时执行
  p.mouseDragged = function(e) {
    let currentColor = colorPicker.color(); // 获取颜色选择器当前选中的颜色
    p.fill(currentColor);   // 设置绘制形状的填充色
    p.stroke(currentColor); // 设置绘制形状的描边色（与填充色相同，使画笔边缘平滑）
    // 在鼠标当前位置绘制一个圆形作为画笔轨迹
    // e.clientX 和 e.clientY 提供鼠标在浏览器视口中的坐标
    p.ellipse(e.clientX, e.clientY, brushSize, brushSize);
  };
};

// 创建一个新的 p5 实例并运行上面定义的 sketch
let myp5 = new p5(sketch);

登录后复制