利用Canvas给网页加水印

需求：给网页加自定义文字水印效果

先上代码

/**
* 为网页添加文字水印方法
* @param [Array] str 要添加的字符串数组,分别为姓名，手机号，日期
* [name,mobileNumber,datetime]
*/
function addWaterMarker(strArr){
    var ctx = document.createElement('canvas');
    var body = document.body;
    can.width=150; // canvas宽高
    can.height=150;
    can.style.display='none';
    var cans = ctx.getContext('2d');
    cans.rotate(-20*Math.PI/180); // 倾斜度
    cans.font = "14px Microsoft JhengHei"; 
    cans.fillStyle = "rgba(17, 17, 17, 0.40)";
    cans.textAlign = 'left'; 
    cans.textBaseline = 'Middle';
    cans.fillText(strArr[0],0,100);
    cans.fillText(strArr[1],0,120); 
    cans.font = "16px Microsoft JhengHei"; 
    cans.fillStyle = "rgba(17, 17, 17, 0.40)";
    cans.fillText(strArr[2],0,140);
    body.appendChild(ctx);
    body.style.backgroundImage="url("+ctx.toDataURL("image/png")+")";
}
//调用方法
addWaterMarker(['刘皇叔','15888888888','20181207']);

加水印前后页面对比：

原始页面
加水印之后