简单的前端水印（canvas）

前几天做项目，客户要求在页面中添加水印，在查询一段资料后，就自己改了些东西，想到了canvas，想到就去做；

代码：js地址：https://home.400gb.com/#item-files/action-index

function textBecomeImg(text,fontsize,fontcolor){
        var canvas = document.createElement('canvas');
        $buHeight = 0;
        if(fontsize <= 32){ $buHeight = 45; }
        else if(fontsize > 32 && fontsize <= 60 ){ $buHeight = 2;}
        else if(fontsize > 60 && fontsize <= 80 ){ $buHeight = 4;}
        else if(fontsize > 80 && fontsize <= 100 ){ $buHeight = 6;}
        else if(fontsize > 100 ){ $buHeight = 10;}
        canvas.height=fontsize + $buHeight ;
        canvas.padding=30;
        var context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width*2, canvas.height);
        context.fillStyle = fontcolor;
        context.font=fontsize+"px Arial";
        context.textAlign = "center";
        context.textBaseline = 'middle'; 
        context.fillText(text,0,fontsize/2);
        var canvasWidth = canvas.width/99;
        canvasWidth = context.measureText(text).width;
        canvas.width = 250;
        canvas.height = 100;
        context.fillStyle = fontcolor;
        context.font=fontsize+"px Arial";
        context.textBaseline = 'middle'; 
        context.fillText(text,0,fontsize/2);
        var dataUrl = canvas.toDataURL('image/png');
        return dataUrl;
  }
  function  contant(cont,left,top) { 
    var text = cont;
    var shuiyinDiv = document.createElement('div');
    var style = shuiyinDiv.style;
    style.position = 'absolute';
    style.left = left;
    style.top = top;
    style.width = '250%';
    style.height = '300%';
    style.opacity = '0.15';
    style.background = "url("+textBecomeImg(text,22,"red")+")";
    style.zIndex = 9999999991;
    style.transform = "rotate(-30deg)";
    style.pointerEvents = "none";
  document.getElementById('contant').appendChild(shuiyinDiv);
   }
//调用的时候：

　　contant('测试水印','-60%','-60%')；
　　//但需要调用多次的时候，我们需要把纵坐标进行调整就行了


 
　　contant('测试水印1','-60%','-55%')

　　contant('测试水印2','-60%','-50%')

实现的逻辑主要就是通过canvas新建div实现的；上面的代码中

document.getElementById('contant').appendChild(shuiyinDiv);可以更改为

document.body.appendChild(shuiyinDiv);
这样的话内容就会被添加到body当中，因为这样的话，我们无法获取页面的实际高度，所以会出险只有当前屏幕有水印的结果；
所以我在页面中是这样写的，用一个div存放水印，div通过定位定到当前页面，设置宽高百分百，这样就能达到所有内容下都有水印。
html代码：

  <div id="contant"></div>

css：

 html,body{
      width: 100%;
      height: 100%;
      overflow: auto;
    }
    #contant{
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      overflow: hidden;
      z-index: -2
    }

需要的拿走，谢谢！！！