哈喽，各位倔友们又见面了，本章我们继续来分享一个实用小技巧，给图片加水印功能，水印功能的目的是为了保护网站或作者版权，防止内容被别人利用或白嫖。

但是网络中，是没有绝对安全的，我们只能尽可能去完善安全机制，像水印功能也只能是防君子，防不了小人。

下面小编画了一张添加水印的简易流程图：

接下来，进入文章主题，既然是要给图片添加水印，那么我们先来把图片绘制到 canvas 上，具体如下：

整体代码不难，为了方便演示，小编直接把 canvas 放在 template 中，但真实使用场景下你可以使用 document.createElement('canvas') 来创建 Dom 并在使用结束后删除相关 DOM，这样才是比较好的方式唷。(✪ω✪)

还有就是使用 ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) API 来绘制图片。

作为一名前端人员小编希望你对 canvas 多多少少要有一点了解哦，不能说精通，但是基础知识咱们要掌握哦。

把图片绘制到 canvas 后，接下来我们来把水印也给整上。

上图左上角能看到我们很简单就把水印加上了，当然，这还达不到产品经理的要求，我们需要把水印平铺开来，防止别人轻易通过截图就把水印清除了。

而这个平铺过程也很简单，只要循环去改变 ctx.fillText(text, x, y); 的 x 和 y 就行了，且来看看小编是如何来做的：