使用canvas添加水印

当页面过长时，会出现canvas标签太多，导致页面卡顿的问题，因此，添加的canvas采用fixed定位，这样无论页面多长

水印个数确定不变

css样式追加

 .canvasOverlay{
    pointer-events: none;
     position: fixed;
     left: 0;
     z-index:999;
}

function watermark(mapboxCanvas,username, textDis) {
    let canvasOverlay = document.createElement("canvas");
    //canvasOverlay.style.position = "absolute";
    canvasOverlay.id = "overlay-canvas";
    canvasOverlay.className="canvasOverlay";
    var winWidth =  document.documentElement.clientWidth;
    var winHeight =  document.documentElement.clientHeight;

    canvasOverlay.width = parseInt(winWidth);
    canvasOverlay.height = parseInt(winHeight);
    mapboxCanvas.prepend(canvasOverlay);

    const ctx = canvasOverlay.getContext('2d');

    //文本颜色就是描边的颜色
    ctx.strokeStyle = "black";
    //设置字体大小和字体类型
    ctx.font = "15px 微软雅黑";
    //取消虚线绘制
   //ctx.rotate((Math.PI / 180) * 8);
    ctx.globalAlpha = 0.2;
    //绘制文本
    for(let i=0;i<canvasOverlay.width;i+=textDis){
        for(let j=0;j<canvasOverlay.height;j+=textDis){
            ctx.strokeText(username,i,j);

        }
    }
};

此前使用的方法是追加n个p标签，存在两个问题；

在进行页面缩放的时候，删除之前的标签完成事件之前就开始追加新的；会导致字体重影；

第二个问题是使用浏览器的搜索功能会搜索出水印

因此该用canvas来做；其实canvas做更加简单，且效率更加高。

其中mapboxCanvas 为需要添加水印的div元素，username为水印的文字；textdis为水印文字之间的间隔。

function watermark(mapboxCanvas,username, textDis) {
    let canvasOverlay = document.createElement("canvas");
    canvasOverlay.style.position = "absolute";
    canvasOverlay.id = "overlay-canvas";
       canvasOverlay.width = parseInt(mapboxCanvas.clientWidth);
    canvasOverlay.height = parseInt(mapboxCanvas.clientHeight);
    mapboxCanvas.prepend(canvasOverlay);
    canvasOverlay.className="canvasOverlay";

    const ctx = canvasOverlay.getContext('2d');

    //文本颜色就是描边的颜色
    ctx.strokeStyle = "black";
    //设置字体大小和字体类型
    ctx.font = "15px 微软雅黑";
    //文字旋转
   ctx.rotate((Math.PI / 180) * 8);
    ctx.globalAlpha = 0.6;
    //绘制文本
    for(let i=0;i<canvasOverlay.width;i+=textDis){
        for(let j=0;j<canvasOverlay.height;j+=textDis){
            ctx.strokeText(username,i,j);

        }
    }
}

 

效果如下；

后来发现一个问题是；当canvas在最上层时，无法点击下方的dom元素

查阅资料后发现只要设置canvas元素的style属性 pointer-events: none即可；

目前发现的问题是没办法动态设置，因此在全局css文件中预先添加该样式，为canvas添加响应的class类名即可。