水印效果图
水印.png
1、创建画布用于存放水印
// 创建水印画布
createCanvas(){
// 创建一个画布
let canvas = document.createElement('canvas')
// 设置画布的长宽
canvas.width = 110
canvas.height = 135
let cans = canvas.getContext('2d')
// 旋转角度
cans.rotate(-30 * Math.PI / 180)
cans.font = '15px Vedana'
// 设置填充绘画的颜色、渐变或者模式
cans.fillStyle = 'rgba(25, 170, 141, 0.50)'
// 设置文本内容的当前对齐方式
cans.textAlign = 'left'
// 设置在绘制文本时使用的当前文本基线
cans.textBaseline = 'Middle'
// 在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）
cans.fillText(this.waterWord, canvas.width / 8, canvas.height / 2)
return canvas
}
2、添加水印
注意：
2.1、将第一步创建的画布转换成图片以背景图片的形式放在页面中，设置背景图片CSS属性为repeat,实现水印自动排列。
2.2、注意将水印容器的CSS属性pointerEvents设置成none，否则添加水印后，水印遮罩页面，导致用户无法点击访问。
// 添加水印
addWaterMark(){
let div = document.createElement('div')
div.id = this.id
// 水印容器遮罩在页面上方，不这样设置，水印会遮住页面，无法对页面进行操作
div.style.pointerEvents = 'none'
div.style.left = '0px'
div.style.position = 'fixed'
div.style.zIndex = '99'
div.style.width = document.documentElement.clientWidth + 'px'
div.style.height = document.documentElement.clientHeight + 'px'
// 将canvas转换成图片
div.style.background = 'url(' + this.canvas.toDataURL('image/png') + ') left top repeat'
document.body.appendChild(div)
}
3、要监测界面变化，页面放大缩小时要重新设置水印，否则数量上和颜色上会存在一定的问题。
window.onresize = () => {
// 水印绘制好，如果不去掉之前的水印导致水印叠加，水印的颜色会越来越深
if (document.getElementById(waterMark.id) !== null) {
document.body.removeChild(document.getElementById(waterMark.id))
}
waterMark.addWaterMark()
}
4、整体代码
class WaterMark{
/**
* 构造函数
* 水印所在的模板id
* 水印的文字
*/
constructor(id,waterWord){
this.id = id
this.waterWord = waterWord
this.canvas = this.createCanvas()
}
// 创建水印画布
createCanvas(){
// 创建一个画布
let canvas = document.createElement('canvas')
// 设置画布的长宽
canvas.width = 110
canvas.height = 135
let cans = canvas.getContext('2d')
// 旋转角度
cans.rotate(-30 * Math.PI / 180)
cans.font = '15px Vedana'
// 设置填充绘画的颜色、渐变或者模式
cans.fillStyle = 'rgba(25, 170, 141, 0.50)'
// 设置文本内容的当前对齐方式
cans.textAlign = 'left'
// 设置在绘制文本时使用的当前文本基线
cans.textBaseline = 'Middle'
// 在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）
cans.fillText(this.waterWord, canvas.width / 8, canvas.height / 2)
return canvas
}
// 添加水印
addWaterMark(){
let div = document.createElement('div')
div.id = this.id
// 水印容器遮罩在页面上方，不这样设置，水印会遮住页面，无法对页面进行操作
div.style.pointerEvents = 'none'
div.style.left = '0px'
div.style.position = 'fixed'
div.style.zIndex = '99'
div.style.width = document.documentElement.clientWidth + 'px'
div.style.height = document.documentElement.clientHeight + 'px'
// 将canvas转换成图片
div.style.background = 'url(' + this.canvas.toDataURL('image/png') + ') left top repeat'
document.body.appendChild(div)
}
}
// 这个地方设置唯一的id比较复杂，防止页面出现相同的id
let waterMark = new WaterMark("5223252ghjkkjhgjl",'前端yyds')
// 添加水印
waterMark.addWaterMark()
// 页面大小调整时水印重新绘制
window.onresize = () => {
// 水印绘制好，如果不去掉之前的水印导致水印叠加，水印的颜色会越来越深
if (document.getElementById(waterMark.id) !== null) {
document.body.removeChild(document.getElementById(waterMark.id))
}
waterMark.addWaterMark()
}
