JavaScript教程：使用P5.js创建带纹理的纸张背景-CSDN博客

本文介绍了如何使用P5.js创建带有纹理的纸张背景，以模拟水彩画效果。首先，文章讲解了如何设置HSB颜色模式来创建所需的米白色背景。接着，通过绘制随机分布的短线模拟纸张纤维，调整线条的颜色和长度以增加纹理感。最终，通过调整线条颜色的饱和度和亮度，实现了接近美纹纸的效果。

摘要由CSDN通过智能技术生成

上周，我介绍了生成艺术的概念P5.js，以及有关P5.js的一些设置问题。我给您留下了一个脚手架的存储库，该存储库使所有项目设置麻烦事都消除了，但是我们还没有研究任何东西。本周，我们将开始实际制作一些艺术品。

我们将通过介绍一些基本的API概念开始简单的工作，并在为水彩效果创建“纸”时建立适当数量的随机性。正确使用纸张水彩对于任何水彩都很重要。它还将帮助我们进入在数字空间中模拟现实世界的思维方式。这篇文章其余部分的目的是为水彩背景创造真实的纸张效果。我希望我们的纸张为米白色，奶油色或米色，并且应该有一点质感。

请注意，我称背景为“纸”（我要模仿的东西），而不是“画布元素”（实现术语）。用现实世界而不是数字空间来思考是使我脱离实现细节并帮助指导我的直觉的一个小脑力把戏。

在P5.js中创建彩色背景

我们的脚手架中已经包含了一些P5代码，因此我们可以使用现有的设置功能开始使用。

p5.setup = () => {
   
    p5.createCanvas(CANVAS_WIDTH, CANVAS_HEIGHT);
    p5.colorMode(p5.HSB, 100);
    p5.frameRate(5);
    p5.background(10);
    p5.textSize(46);
    p5.fill(90);
    p5.text('Hello (Info)World!', 120, 280);
};

因为我们不需要编写文本，所以不需要p5.setup函数主体的最后三行，因此让我们删除这些行并逐步执行其余代码。

首先，我们创建一个具有一定宽度和高度的画布，该画布由前面在文件中定义的常量指定。此代码实际上创建了canvas元素并将其添加到DOM中。接下来，我们将P5的颜色模式设置为HSB，范围为0到100。

作为开发人员，您可能对十六进制颜色代码（