实现水印的方式有多种，这里主要是通过canvas转本地base64图片地址，结合background-image实现背景水印平铺效果的，有需要的采用😁(ios和安卓兼容)。

具体的js逻辑，大家可以直接看代码片段，此处给到思路🙄

注意：代码片段在真机预览时，不建议使用 Skyline 渲染调试，因为出不来东西🤣。暂时还不了解这玩意，应该是微信新推出的吧，正常线上项目一般都是采用WebView，亲测正常😎。

代码片段：https://developers.weixin.qq.com/s/UR1lT9mw7qPw

1. 通过canvas绘制对应的文本(代码中用的是新版canvas 2D API)；
2. 通过 wx.canvasToTempFilePath 将绘制的canvas转为 本地临时文件路径 ，其中在开发工具中生成的一般为 http:// 开头的，但是在真机中生成的是 wx://file 开头，所以不可以直接作为 background-image：url() 的引用路径；
3. 因此需要 wx.getFileSystemManager() 将临时路径文件转为base64本地图片路径，作为 background-image：url() 的引用路径；

4. 最后通过调整 background-position-x 来调整水印的位置，如果你想要增加或减少水印的列数或数量，可以通过改变wxss中默认canvas画布大小：--canvaW/H 来控制；

🎉如何全局添加页面水印？

首先需要明确的是，你无法全局动态且便捷的添加水印。只能在某一页面引入水印组件(pageWaterMark)才能实现，哪个页面需要引入进哪个。

但是如果你想要纯静态引入，例如某一环境，SIT测试环境。那么你就可以直接转为base64本地图片地址，一次性引入全局了！！

图片不能太复杂，否则你引入的base64编码会很长很长。。

// pageWaterMark/index.wxss
page::before{
    content: '';
  display: block;
  background-size: 150px;
  /* 本地base64测试背景图 sit uat 不一致， */
    background-image: url(data:image/png;base64,.........)
}

// app.wxss
@import '/components/pageWaterMark/index.wxss';

这样，全局的每一个页面都会有你添加的 SIT测试环境 的水印字样。