1. 简介：构建交互式绘图工具
p5.js是一个非常适合创建交互式图形和动画的JavaScript库。在本教程中，我们将一步步构建一个简单的绘图应用程序，用户可以使用鼠标进行绘画，通过颜色选择器改变画笔颜色，并通过键盘调整画笔大小或清空画布。我们将采用p5.js的实例模式（Instance Mode）来编写代码，这有助于避免全局变量污染，并允许在同一页面上运行多个p5.js草图。
2. 环境准备
在开始之前，请确保您的HTML文件中引入了p5.js库。您可以通过CDN链接快速引入：
p5.js 绘图应用
在 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);关键点：
- 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);7. 总结
通过本教程，您已经成功构建了一个基于p5.js的交互式绘图应用程序。您学习了：
- p5.js 实例模式：如何以模块化的方式组织您的p5.js代码。
- 颜色选择器集成：使用 p.createColorPicker() 让用户选择画笔颜色。
- 鼠标拖动绘图：利用 p.mouseDragged 事件和 e.clientX/e.clientY 绘制实时轨迹。
- 键盘控制：通过 p.keyPressed 事件和 e.key 实现画笔大小调整和画布清空功能。
这个基础应用可以作为进一步扩展的起点，例如添加更多画笔类型、保存画布内容、撤销/重做功能等。希望本教程能帮助您更好地理解和使用p5.js创建丰富的交互式体验。
