js 水印

利用canvas来画网页上的水印，代码如下：

function watermarker(w,h,str){
    var canvas = document.createElement('canvas');
    var body = document.body;
    body.appendChild(canvas);
    canvas.width=w; //画布的宽
    canvas.height=h;//画布的高度
    canvas.style.display='none';
    var canvas= canvas.getContext('2d');
    canvas.rotate(-20*Math.PI/180); //画布里面文字的旋转角度
    canvas.font = "16px Microsoft JhengHei"; //画布里面文字的字体
    canvas.fillStyle = "rgba(17, 17, 17, 0.50)";//画布里面文字的颜色
    canvas.textAlign = 'left'; //画布里面文字的水平位置
    canvas.textBaseline = 'Middle'; //画布里面文字的垂直位置
    canvas.fillText(str,canvas.width/3,canvas.height/2); //画布里面文字的间距比例
    var wmImg = canvas.toDataURL("image/png");
    console.log(wmImg)
    return wmImg
}

var wmBgImg = watermarker(400,400, 'test txt')
console.log(wmBgImg)
// 生成图片之后就可以作为某个区域的背景，搞定