把文字做涂鸦效果的五种实现方案

介绍

在很多创意网站上，我们都会见到很多文字涂鸦效果，本期我们就介绍五种方法来实现这些文字涂鸦效果，康康如何通过前端技术，一起来让你的网页更有创意吧。

当然在做之前，我们先准备一张涂鸦纹理图哟~

正文

background-clip

https://code.juejin.cn/pen/7112305112659263495

我们实际上需要一个将纹理图设置为背景的背景层和一个放置文本的前景层。然后设置 background-clip:text ，意味着，它将背景被裁剪成为文字的前景色，当然最后不要忘了 text-fill-color: transparent 让文字做透明填充，纹理效果才会凸显出来。

这个方法在我们的开发中也是最常见的一个方案，虽然常见但 background-clip:text 和 text-fill-color: transparent 都算是试验属性，要写上浏览器内核的前缀。兼容性马马虎虎吧，但是显现起来比较简单。

clip-path

https://code.juejin.cn/pen/7112350166690037768

<img style="clip-path: url(#clip);" src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/98d5839f47354aaa86afb246b7fd9ea9~tplv-k3u1fbpfcp-watermark.image?" /> 

首先我们可以看到，我的目标从文本标签变成了img标签，这意味着，我们其实最终是对这个图片通过 clip-path 裁切出文字。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><clipPath id="clip" x="0" y="0"><text x="50%" y="51%" textlength="7em">hello world</text></clipPath>
</svg> 

当然，我们要在svg中写个裁切的区域文字才可以，当然如果追求更多艺术效果也可在绘图工具中导出svg的path路径实现更多的图形效果。这次我们就算好中间的位置然后写入文本就好。

创建剪辑区域 clip-path 这个方法兼容性会好一些，但是就使用起来比较也稍有些麻烦。

pattern

https://code.juejin.cn/pen/7112323100762439711

这个方法主要是通过svg 的 pattern 做出一个纹理图案，然后 fill 或者 stroke 把文字或者其他图形填充上，它的功能是非常的强大而且兼容性也不错，但缺点也是比较明显的，就算要写非常多的代码去做一些位置定位计算，而且如果后面效果非常多其代码块也会变得很多，就很头疼。。

canvas

https://code.juejin.cn/pen/7112356508020506655

利用画布绘制填充出纹理文字，其核心是CanvasRenderingContext2D.createPattern() ,用它去创建一个指定图像模板，然后通过 fillText 把文字绘制到画布中。

canvas方案兼容性是不错的，而且可以做很多效果，但缺点就是你要写一些js代码进去，有些麻烦。

mask-image

https://code.juejin.cn/pen/7112330985257041927

这个方法利用了 mask-image 设置遮罩图片，再通过 mask-size 设置遮罩图像的大小，非常容易就可以让文字实现了纹理效果，而且不仅如此，你还可以更改颜色和边框非常的简单又强大。

先下结论，我认为这是目前效果最好的一个方案，极其方便的实现了想要的涂鸦效果，而且十分强大，可能唯一缺点就在于兼容性方面，目前也需要家前缀才能正常使用。

这篇好文章是转载于：学新通技术网