写一个水印效果写了好久，最终败给了canvas，还是选择用div写水印

function watermark2(id, element) {
let defaultConfig = {
mark_element: element,
mark_text: id || ‘’,
mark_x: 0,
mark_y: 0,
mark_color: ‘rgba(255,255,255,.5)’,
mark_size: ‘16’,
mark_font: “微软雅黑”,
mark_width: 100,
mark_height: 30,
mark_angle: ‘45deg’
}
let body = document.querySelector(‘body’);
let canvas = document.createElement(‘canvas’)
if (!element) {
defaultConfig.mark_element = body
}
let width = Math.max(body.scrollWidth, body.clientWidth)
let height = Math.max(body.scrollHeight, body.clientHeight)
canvas.width = width;
canvas.height = height;
canvas.style.zIndex = 0
canvas.style.pointerEvents = ‘none’;
canvas.style.position = ‘absolute’;
canvas.style.top = 0;
canvas.style.left = 0;
defaultConfig.mark_cols = Math.ceil(width / defaultConfig.mark_width)
defaultConfig.mark_rows = Math.ceil(height / defaultConfig.mark_height)
let x, y;
let ctx = canvas.getContext(‘2d’)
ctx.fillStyle = defaultConfig.mark_color
ctx.textAlign = “center”
for (let i = 0; i < defaultConfig.mark_rows; i++) {
y = defaultConfig.mark_y + defaultConfig.mark_height * i + defaultConfig.mark_height / 2 + defaultConfig.mark_size / 2;
for (let j = 0; j < defaultConfig.mark_cols; j++) {
if(j>0){
ctx.restore()
}
x = defaultConfig.mark_x + defaultConfig.mark_width * j + defaultConfig.mark_width / 2;
ctx.font = ${defaultConfig.mark_size}px ${defaultConfig.mark_font};
ctx.fillText(defaultConfig.mark_text, x, y)
ctx.rotate(45 * Math.PI / 180)
ctx.save()
}
}
defaultConfig.mark_element.append(canvas)
}

function watermark1(id) {
var can = document.createElement(‘canvas’);
let body = document.querySelector(‘body’);
let config={
width:100,
height: 40,
}
// body.appendChild(can);

var cans = can.getContext('2d');
cans.rotate(-45 * Math.PI / 180);
cans.font = "400 16px Microsoft JhengHei";
cans.fillStyle = "rgba(255,255,255,.5)";
cans.textAlign = 'center';
cans.textBaseline = 'Middle';
// if (cans.measureText(cpyName).width > 180) {
//     var size = 180 / cpyName.length
//     cans.font = '800 ' + size + 'px ' + ' Microsoft JhengHei'
// }
cans.fillText(id, 60, 100);
body.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";

}

function watermark(id, element) {
let defaultConfig = {
mark_element: element,
mark_text: id || ‘’,
mark_color: ‘rgba(255,255,255,.5)’,
mark_size: ‘16’,
mark_font: “微软雅黑”,
mark_width: 80,
mark_height: 30,
mark_angle: ‘45deg’
}
let div=document.createElement(‘div’)
let body = document.querySelector(‘body’);
if (!element) {
defaultConfig.mark_element = body
}
div.style.display=‘flex’,
div.style.justifyContent=‘space-around’
div.style.flexWrap=‘wrap’
div.style.pointerEvents = ‘none’;
div.style.zIndex = 0
div.style.position = ‘absolute’;
div.style.top = 0;
div.style.left = 0;
div.style.width=‘100%’,
div.style.height=‘100%’
let width = Math.max(body.scrollWidth, body.clientWidth)
let height = Math.max(body.scrollHeight, body.clientHeight)
defaultConfig.mark_cols = Math.ceil(width / defaultConfig.mark_width)
defaultConfig.mark_rows = Math.ceil(height / defaultConfig.mark_height)
let num=defaultConfig.mark_colsdefaultConfig.mark_rows
for(let i=0;i<num;i++){
let canvas=document.createElement(‘canvas’)
canvas.width = defaultConfig.mark_width;
canvas.height = defaultConfig.mark_height;
let ctx=canvas.getContext(‘2d’)
// ctx.translate(canvas.width/2,canvas.height/2)
ctx.fillStyle=defaultConfig.mark_color;
ctx.textAlign=‘center’
ctx.textBaseline=‘middle’
ctx.font=${defaultConfig.mark_size}px ${defaultConfig.mark_font}
ctx.fillText(defaultConfig.mark_text,canvas.width/2,canvas.height/2+defaultConfig.mark_size/2)
ctx.rotate(40Math.PI/180)
div.appendChild(canvas)
}
defaultConfig.mark_element.append(div)
}

function watermark(id, element) {
let defaultConfig = {
mark_element: element,
mark_text: id || ‘’,
mark_color: ‘red’,
mark_size: ‘16’,
mark_font: “微软雅黑”,
mark_width: 200,
mark_height: 200,
mark_angle: 45
}
let body = document.querySelector(‘body’);
if (!element) {
defaultConfig.mark_element = body
}
let width = Math.max(body.scrollWidth, body.clientWidth)
let height = Math.max(body.scrollHeight, body.clientHeight)
defaultConfig.mark_cols = Math.ceil(width / defaultConfig.mark_width)
defaultConfig.mark_rows = Math.ceil(height / defaultConfig.mark_height)
let x,y;
for (let i = 0; i < defaultConfig.mark_rows; i++) {
y = defaultConfig.mark_height * i;
for (let j = 0; j < defaultConfig.mark_cols; j++) {
x = defaultConfig.mark_width * j;
let div=document.createElement(‘div’)
div.innerHTML=defaultConfig.mark_text
div.style.transform=“rotate(-”+defaultConfig.mark_angle+“deg)”;
div.style.position=‘absolute’;
div.style.left=x+‘px’;
div.style.top=y+‘px’;
div.style.zIndex=9999999
div.style.pointerEvents=‘none’
div.style.color=defaultConfig.mark_color
div.style.fontSize=defaultConfig.mark_size+‘px’
div.style.fontFamily=defaultConfig.mark_font
div.style.width=defaultConfig.mark_width+‘px’
div.style.height=defaultConfig.mark_height+‘px’
div.style.textAlign=“center”
div.style.lineHeight=defaultConfig.mark_height+‘px’
defaultConfig.mark_element.append(div)
}
}
}

//最后采用的是这套代码，以上都是泪，都是卡住我的高山，有时间我一定要去看看canvas的rotate到底是啥玩意，老子不想累加旋转怎么都解决不了
function watermark(id, element) {
let defaultConfig = {
mark_element: element,
mark_text: id || ‘’,
mark_color: ‘red’,
mark_size: ‘16’,
mark_font: “微软雅黑”,
mark_width: 200,
mark_height: 200,
mark_angle: 45
}
let body = document.querySelector(‘body’);
if (!element) {
defaultConfig.mark_element = body
}
let width = Math.max(body.scrollWidth, body.clientWidth)
let height = Math.max(body.scrollHeight, body.clientHeight)
defaultConfig.mark_cols = Math.ceil(width / defaultConfig.mark_width)
defaultConfig.mark_rows = Math.ceil(height / defaultConfig.mark_height)
let oTemp=document.createElement(‘div’)
oTemp.style.display=‘flex’;
oTemp.style.justifyContent=‘space-around’;
oTemp.style.flexWrap=‘wrap’
let x,y;
for (let i = 0; i < defaultConfig.mark_rows; i++) {
y = defaultConfig.mark_height * i;
for (let j = 0; j < defaultConfig.mark_cols; j++) {
x = defaultConfig.mark_width * j;
let div=document.createElement(‘div’)
div.innerHTML=defaultConfig.mark_text
div.style.transform=“rotate(-”+defaultConfig.mark_angle+“deg)”;
div.style.position=‘absolute’;
div.style.left=x+‘px’;
div.style.top=y+‘px’;
div.style.zIndex=9999999
div.style.pointerEvents=‘none’
div.style.color=defaultConfig.mark_color
div.style.fontSize=defaultConfig.mark_size+‘px’
div.style.fontFamily=defaultConfig.mark_font
div.style.width=defaultConfig.mark_width+‘px’
div.style.height=defaultConfig.mark_height+‘px’
div.style.textAlign=“center”
div.style.lineHeight=defaultConfig.mark_height+‘px’
oTemp.appendChild(div)
}
}
defaultConfig.mark_element.appendChild(oTemp)
}
export default watermark