本文旨在帮助开发者解决在使用 p5.js 创建着色画笔时遇到的常见问题。我们将通过分析错误代码，提供清晰的解决方案，并给出完整的可运行示例，涵盖颜色选择、画笔大小调整、清空画布以及保存画布等功能，助你快速上手 p5.js 画笔应用开发。
问题分析
原代码存在一些问题，导致着色画笔无法正常工作：
- draw() 函数使用不当： draw() 函数被错误地用于更新画笔颜色，但实际上它应该主要用于持续渲染画面。画笔颜色应该在 mouseDragged() 函数中更新。
- colorPicker 使用错误： 在 mouseDragged() 函数中直接使用 colorPicker 作为 fill() 函数的参数是错误的。应该先获取 colorPicker 的颜色值，再传递给 fill() 函数。
- 坐标系问题： mouseX 和 mouseY 可能存在问题，导致画笔位置不正确。
- 清空画布和保存画布功能未正确实现： keyTyped() 函数中的清空画布和保存画布功能实现方式不正确。
解决方案
以下是修改后的代码，它解决了上述问题，并提供了更清晰的实现方式：
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.keyPressed = function(e) {
let key = e.key;
if (key === '=') brushSize += brushSize * 0.1;
else if (key === '-') brushSize -= brushSize * 0.1;
else if (key === 'c') p.clear();
else if (key === 's') p.saveCanvas('myCanvas', 'jpg');
}
p.mouseDragged = function(e) {
color = colorPicker.color()
p.fill(color);
p.stroke(color);
p.ellipse(e.clientX, e.clientY, brushSize, brushSize / 2)
}
};
let myp5 = new p5(sketch);代码详解
-
setup() 函数：
- createCanvas(600, 600): 创建一个 600x600 像素的画布。
- colorPicker = p.createColorPicker('red'): 创建一个颜色选择器，初始颜色为红色。
- colorPicker.position(0, 0): 将颜色选择器放置在画布的左上角。
-
keyPressed() 函数：
- 监听键盘事件，根据按键执行不同的操作。
- '=' 键：增大画笔大小。
- '-' 键：减小画笔大小。
- 'c' 键：清空画布。 p.clear() 函数用于清空画布内容。
- 's' 键：保存画布为图片。p.saveCanvas('myCanvas', 'jpg') 函数用于保存画布为 JPG 格式的图片，文件名为 "myCanvas"。
-
mouseDragged() 函数：
- 监听鼠标拖动事件，用于绘制画笔。
- color = colorPicker.color(): 获取颜色选择器当前选中的颜色。
- p.fill(color): 设置填充颜色为选中的颜色。
- p.stroke(color): 设置轮廓颜色为选中的颜色。
- p.ellipse(e.clientX, e.clientY, brushSize, brushSize / 2): 在鼠标当前位置绘制一个椭圆，大小由 brushSize 决定。使用 e.clientX 和 e.clientY 获取鼠标在窗口中的坐标。
注意事项
- 确保引入 p5.js 库。
- saveCanvas() 函数在某些浏览器中可能需要用户授权才能下载文件。
- 可以根据需要调整画笔的形状、大小和颜色。
- 可以添加更多的功能，例如画笔类型选择、撤销/重做等。
总结
通过修改后的代码，我们成功创建了一个可以着色的画笔，并实现了调整大小、清空画布和保存画布的功能。 掌握这些基础知识，可以构建更复杂的 p5.js 绘画应用。记住，理解 p5.js 的核心概念，例如 setup()、draw() 和事件处理函数，是解决问题的关键。
