在前端设计中，纹理常常被用来装饰网页的背景、标题等元素。例如，一些艺术风格的网页常常采用手绘风格的纹理作为背景图案，达到一种独特的效果。那么，如何在网页中添加这样的手绘纹理呢？npm 包 painterly-textures 可以帮助我们完成这个任务。
介绍 painterly-textures 包
painterly-textures 是一个基于 canvas 的 npm 包，它提供了一些手绘纹理的生成方法。这些纹理可以自定义颜色、大小、密度等参数，具有较好的可塑性。
使用 painterly-textures
安装
在开始使用 painterly-textures 之前，需要先在项目中安装该包。可以使用 npm 进行安装：
npm install painterly-textures
基本使用
安装完成后，我们可以在项目中引入 painterly-textures：
const PainterlyTextures = require('painterly-textures');然后，可以使用 PainterlyTextures 的 generate() 方法生成纹理：
const canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
const painterlyTextures = new PainterlyTextures(canvas);
painterlyTextures.generate();以上代码将在一个大小为 500x500 的 canvas 上生成一个默认大小的手绘纹理。我们可以在页面上看到这个手绘纹理。
自定义参数
painterly-textures 提供了一些参数，可以用来控制纹理生成的效果。下面，我们将介绍这些参数。
颜色
我们可以使用 color 参数来指定纹理的颜色。这个参数可以是一个表示颜色的字符串，也可以是一个表示 rgba 值的数组。
painterlyTextures.generate({
color: '#ff0000',
});大小
使用 size 参数可以定义纹理的大小。这个参数可以是一个数字，也可以是一个类似 [minSize,maxSize] 的数组。当 size 是数字时，生成的纹理大小将是固定的；当 size 是数组时，生成的纹理大小将在数组范围内随机。默认情况下，size 的值为 [20,50]。
painterlyTextures.generate({
size: 30,
});
painterlyTextures.generate({
size: [20, 50],
});密度
使用 density 参数可以定义纹理的密度。这个参数可以是一个数字，也可以是一个类似 [minDensity,maxDensity] 的数组。当 density 是数字时，生成的纹理密度将是固定的；当 density 是数组时，生成的纹理密度将在数组范围内随机。默认情况下，density 的值为 [0.05,0.1]。
painterlyTextures.generate({
density: 0.08,
});
painterlyTextures.generate({
density: [0.05, 0.2],
});形状
使用 shape 参数可以定义纹理的形状。这个参数可以是一个表示形状的字符串，例如 circle 或 square。
painterlyTextures.generate({
shape: 'circle',
});层次
使用 layers 参数可以定义纹理的层数。这个参数可以是一个数字，也可以是一个类似 [minLayers,maxLayers] 的数组。当 layers 是数字时，生成的纹理层数将是固定的；当 layers 是数组时，生成的纹理层数将在数组范围内随机。默认情况下，layers 的值为 [20, 50]。
painterlyTextures.generate({
layers: 30,
});
painterlyTextures.generate({
layers: [20, 50],
});生成图片
使用 PainterlyTextures 的 toDataUrl() 方法可以将生成的纹理转化为图片。
const imageUrl = painterlyTextures.toDataUrl(); const image = new Image(); image.src = imageUrl; document.body.appendChild(image);
以上代码将生成一个图片，并将它添加到页面中。
示例代码
下面是一个完整的示例代码，用来演示 painterly-textures 的使用效果：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
------------------------- ----------
-------
------
------- ----------- ----------- ----------------------
------- ---------------------------------------------------------------------
--------
----- ------ - ----------------------------------
----- ----------------- - --- --------------------------
----------------------------
------ ----------
----- ---- ----
-------- ------ -----
------ ---------
------- ---
---
----- -------- - ------------------------------
----- ----- - --- --------
--------- - ---------
---------------------------------
---------
-------
-------运行以上代码，可以看到生成的手绘纹理图片。
总结
在本文中，我们介绍了 npm 包 painterly-textures 的使用方法，包括安装、基本使用、自定义参数等。通过 painterly-textures，我们可以方便地生成手绘风格的纹理，并在网页中使用这些纹理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/painterly-textures