最近需要實現為網頁添加水印的功能，由於水印的信息是動態生成的，而百度谷歌上的方法往往都是為網頁添加圖片水印或為圖片添加水印，而為網頁添加文字水印相關資料較少，於是就自己動手寫了這個代碼。
通常加動態水印的思路是：后台服務端根據參數動態生成圖片，前端設置body的background-url或者利用遮罩層+事件委托的方式實現。
本文在這里主要是利用HTML5中canvas來實現動態生成圖片，再利用body設置background-url來實現為網頁增加文字水印
代碼如下：
/**
* 為網頁添加文字水印
* @param {String} str 要添加的字符串
*/
function addWaterMarker(str){
var can = document.createElement('canvas');
var body = document.body;
body.appendChild(can);
can.width=400;
can.height=200;
can.style.display='none';
var cans = can.getContext('2d');
cans.rotate(-20*Math.PI/180);
cans.font = "16px Microsoft JhengHei";
cans.fillStyle = "rgba(17, 17, 17, 0.50)";
cans.textAlign = 'left';
cans.textBaseline = 'Middle';
cans.fillText(str,can.width/3,can.height/2);
body.style.backgroundImage="url("+can.toDataURL("image/png")+")";
}
讀者可以在任意的網站，打開F12的Console運行上段代碼，然后再調用該方法，即可看到效果（如果網頁利用其他遮罩層實現背景圖片，該方法則無法生效，應該考慮利用遮罩層+事件委托的方案）：
