MGWatermark 添加水印
开发中一些给特定人显示的页面内容，又不能外泄怎么办？？？像交管六合一系统、政府政务系统都是不能外泄的，如果外泄根据什么去追究责任呢？ 这就需要对页面做一些特殊处理，通常的方式就是加水印，即使外泄，也可以根据水印追究责任，从而约束外泄人员
小程序在水印方面没有特定的API,所以需要我们自定义，下面是我通过画布canvas进行水印绘制已完成添加水印的功能
文末附demo 欢迎交流!!!
主要代码进行解析
水印用了画布canvas绘制
(1) 使用 wx.createContext 获取绘图上下文 context
var ctx = wx.createCanvasContext("watermarkCanvas");
(2) 设置文字的旋转角度，角度为45°；
ctx.rotate(45 * Math.PI / 180);
(3) 开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边
在最开始的时候相当于调用了一次 beginPath。同一个路径内的多次 setFillStyle、setStrokeStyle、setLineWidth等设置，以最后一次设置为准。
ctx.beginPath();
(4) 设置填充色
ctx.setFillStyle("rgba(169,169,169,.5)");
(5) 在画布上绘制被填充的文本, 文本 x坐标位置 y坐标位置 需要绘制的最大宽度
ctx.fillText(' 姓名:' + waterName, 350 * i, 150 * j);
(6) 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
ctx.draw();
示例代码
效果展示：
代码
index.wxml
<!--index.wxml--><button type='primary' bindtap='watermarkClick'>添加水印</button><view class='contentView1'>党的十八大提出，倡导富强、民主、文明、和谐，倡导自由 、平等、公正、法治，倡导爱国、敬业、诚信、友善，积极培育和践行社会主义核心价值观。富强、民主、文明、和谐是国家层面的价值目标，自由、平等、公正、法治是社会层面的价值取向，爱国、敬业、诚信、友善是公民个人层面的价值准则，这24个字是社会主义核心价值观的基本内容</view><view class='contentView2'><image src='../../pages/icon.png'></image></view><view class='watermarkView'><canvas canvas-id='watermarkCanvas' style='width:100%;height:{{height}};'></canvas></view>
index.wxss
/**index.wxss**/button{margin: 50rpx 50rpx 50rpx 50rpx;z-index: 10}.contentView1{margin: 50rpx 50rpx 0 50rpx;height: 550rpx;background-color: lightcyan}.contentView2{margin: 0 50rpx 0 50rpx;height: 550rpx;background-color: lavenderblush;display: flex;justify-content: center;align-items: center;}.watermarkView{position: absolute;z-index: 5;opacity: 0.9;top: 0rpx;width: 100%;}
index.js
//index.js//获取应用实例const app = getApp()Page({/*** 页面的初始数据*/data: {height:'1000rpx',},//添加水印watermarkClick:function(){var that = this;that.setData({height:'1500rpx'})this.addWatermark('钢丝球M','17600100069')},//添加水印方法addWatermark:function(waterName,waterPhone){var that = this;var ctx = wx.createCanvasContext("watermarkCanvas");//设置文字的旋转角度，角度为45°； ctx.rotate(45 * Math.PI / 180);//对斜对角线以左部分进行文字的填充for (let j = 1; j < 20; j++) { //用for循环达到重复输出文字的效果，这个for循环代表纵向循环ctx.beginPath();ctx.setFontSize(16);ctx.setFillStyle("rgba(169,169,169,.5)");//文本 x坐标位置 y坐标位置 需要绘制的最大宽度ctx.fillText('姓名:' + waterName, 0, 150 * j);ctx.fillText(' 手机号:' + waterPhone, 0, 150 * j + 20);ctx.fillText('本操作被记录,泄露相关信息', 0, 150 * j + 40);ctx.fillText('将被依法追究法律责任', 0, 150 * j + 60);for (let i = 1; i < 20; i++) {//这个for循环代表横向循环，ctx.beginPath();ctx.setFontSize(16);ctx.setFillStyle("rgba(169,169,169,.5)");//文本 x坐标位置 y坐标位置 需要绘制的最大宽度ctx.fillText('姓名:' + waterName, 350 * i, 150 * j);ctx.fillText(' 手机号:' + waterPhone, 350 * i, 150 * j + 20);ctx.fillText('本操作将被记录，泄露相关信息', 350 * i, 150 * j + 40);ctx.fillText('将被依法追究法律责任', 350 * i, 150 * j + 60);}}//两个for循环的配合，使得文字充满斜对角线的左下部分//对斜对角线以右部分进行文字的填充逻辑同上for (let j = 0; j < 20; j++) {ctx.beginPath();ctx.setFontSize(16);ctx.setFillStyle("rgba(169,169,169,.5)");// 文本 x坐标位置 y坐标位置 需要绘制的最大宽度ctx.fillText('姓名:' + waterName, 0, -150 * j);ctx.fillText(' 手机号:' + waterPhone, 0, -150 * j + 20);ctx.fillText('本操作将被记录,泄露相关信息', 0, -150 * j + 40);ctx.fillText('将被依法追究法律责任', 0, -150 * j + 60);for (let i = 1; i < 20; i++) {ctx.beginPath();ctx.setFontSize(16);ctx.setFillStyle("rgba(169,169,169,.5)");//文本 x坐标位置 y坐标位置 需要绘制的最大宽度ctx.fillText('姓名:' + waterName, 350 * i, -150 * j);ctx.fillText(' 手机号:' + waterPhone, 350 * i, -150 * j + 20);ctx.fillText('本操作将被记录,泄露相关信息', 350 * i, -150 * j + 40);ctx.fillText('将被依法追究法律责任', 350 * i, -150 * j + 60);}}ctx.draw();},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {}})
Demo
Github ：/tomsiebel/MGWatermark–MiniProgram
Gitee ：/siebel/MGWatermark–MiniProgram
