需求：给网页加自定义文字水印效果
先上代码
/**
* 为网页添加文字水印方法
* @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']);
加水印前后页面对比：
原始页面
加水印之后
