H5页面背景添加水印

HTML代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        </style>
    </head>
    <body>
        <script type="text/javascript" src="js/index.js" ></script>
    </body>
</html>

Js代码

(function waterMark(){
    function textBecomeImg(text,fontsize,fontcolor){
        var canvas = document.createElement('canvas');
        $buHeight = 0;
        if(fontsize <= 32){ $buHeight = 99; }
        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 = 450;
        canvas.height = 200;
        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;
    }
    var text = new Date()+'111';
    var shuiyinDiv = document.createElement('div');
    var style = shuiyinDiv.style;
    style.position = 'fixed';
    style.left = 0;
    style.top = '-10%';
    style.width = '200%';
    style.height = '200%';
    style.opacity = '0.1';
    style.background = "url("+textBecomeImg(text,22,"gray")+")";
    style.zIndex = 9999999991;
    style.transform = "translateX(-100px) rotate(-30deg)";
    style.pointerEvents = "none";
    document.body.appendChild(shuiyinDiv);
})();

H5页面背景添加水印

猜你喜欢