簡單的前端水印（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
    }

需要的拿走，謝謝！！！