利用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)
// 生成图片之后就可以作为某个区域的背景,搞定