基于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：

添加样式后：

转载于:https://juejin.im/post/5af2ecb85188256727746a47