H5页面添加水印

function waterMark(){

    var text = "学员9";

    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);

};

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=310;

    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 = 120;

    canvas.height = 140;

    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;

};