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

添加樣式後：