基于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);}复制代码


    .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;}
    复制代码

效果图：

未添加上述样式效果1：

添加样式后：