基于Vue+Canvas移动端的简单水印制作

基于Vue移动端项目，在App.vue根组件中结合原生js+Canvas，简单的给每个页面添加水印。

• 效果：水印图案重复覆盖整个页面
• 思路：先画出单个水印并隐藏，再另一个画布上重复绘制单个水印，把两个画布添加到div中，控制div样式覆盖页面。

//js代码
function paintFixedWaterMark(workId) {//在Vue中可改为ES6写法
var wrap = document.createElement("div");//创建一个div
wrap.className = "fixed-water-mark";//给div添加类名
var wm = document.createElement("canvas");//单个水印画布
wm.id = "watermark";//给canvas标签添加id
wm.width = 100;//设置canvas宽
wm.height = 80;//设置canvas高
wm.style.display = "none";//设置画布隐藏属性
wrap.appendChild(wm);//在div中添加画布
var rwm = document.createElement("canvas");//重复绘制水印画布，用于整个页面
rwm.id = "repeat-watermark";
wrap.appendChild(rwm);
document.body.appendChild(wrap);
//绘制单个水印
var cw = document.getElementById('watermark');
var ctx = cw.getContext("2d");
ctx.clearRect(0, 0, 100, 80);//清空矩形
ctx.font = "15px 黑体";//设置字体
ctx.rotate(-20 * Math.PI / 180);//逆时针旋转20度
ctx.fillStyle = "rgba(100,100,100,0.2)";//填充透明度为0.2的灰色
ctx.fillText(workId, -10, 60);//填充内容为工号
//在另一个画布上重复绘制单个水印
var crw = document.getElementById('repeat-watermark');
crw.width = window.innerWidth;//设置画布宽度等于窗口显示宽度
crw.height = window.innerHeight;//设置画布高度等于窗口显示高度
var ctxr = crw.getContext("2d");
ctxr.clearRect(0, 0, crw.width, crw.height);
var pat = ctxr.createPattern(cw, "repeat");//在水平和垂直方向重复绘制单个水印
ctxr.fillStyle = pat;
ctxr.fillRect(0, 0, crw.width, crw.height);
}
复制代码

<!--css样式-->
.fixed-water-mark {
position: fixed;
pointer-events: none;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1600;
}
.fixed-water-mark #watermark {
text-align: center;
position: absolute;
top: 0;
left: 0;
right: 0;
opacity: 0.4;
margin: 0 auto;
}
<!--注：Vue根组件style标签如果添加了scoped属性，上面样式会失效，可以另写一个style不带scoped属性标签，为了避免样式覆盖，可以在两个样式顶层添加唯一性类名区分-->
复制代码

效果图：

未添加上述样式效果1：