
function canvas(dom: any, txt: any) {
  if (!dom) return false;
  let length = txt.length * 50 > 247 ? txt.length * 50 : 247; // 根据内容生成画布大小，20代表比例
  let canvas = document.createElement('canvas');
  canvas.id = 'canvas'
  canvas.width = length;
  canvas.height = 150;
  canvas.style.display = 'none';
  document.body.appendChild(canvas);
  let context: any = canvas.getContext('2d');
  canvas.style.letterSpacing = 3 + 'px';
  context.font =
    '30px "PingFangSC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif';
  context.fillStyle = 'rgba(255,0,0,0.06)';
  context.rotate((-13 * Math.PI) / 80); // 画布里面文字的旋转角度
  context.fillText(txt, (length / 2 - txt.length * 13 * 2 + 20), length / 2 - 20); // 文字的位置
  dom.style.backgroundImage = `url(${canvas.toDataURL('image/png')})`;
  return;
}
function setBgCanvas(nickname: string) {
  nickname = nickname || 'undefined'
  let nameCanvas = document.getElementById('nameCanvas')
  if (nameCanvas) {
    document.getElementById('root')?.removeChild(nameCanvas)
  }
  if (nickname) {
    let div: any = document.createElement('div');
    div.id = 'nameCanvas'
    div.style = `width: 100%;
                height: 100%;
                position: absolute;
                left: 0px;
                top: 0px;
                z-index: 10000;
                pointer-events: none;
                // background-color:rgba(0,0,0,.03);
                background-repeat: round;`;
    // let main:any = document.body.getElementsByTagName('main')[0];
    let main: any = document.getElementById('root')
    if (main) {
      main.appendChild(div);
      if (nickname && !document.getElementById('canvas')) {
        canvas(div, nickname);
        let myCanvas: any = document.getElementById('canvas')
        document.body.removeChild(myCanvas)
      }

    }
  }
}
export default setBgCanvas