当页面过长时,会出现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类名即可。