本篇内容主要讲解“html5中如何实现SDK水印”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“html5中如何实现SDK水印”吧!

网页水印SDK，实现思路

1.能更具获取到的当前用户信息，如名字，昵称，ID等，生成水印
2.生成一个Canvas，覆盖整个窗口，并且不影响其他元素
3.可以修改字体间距，大小，颜色
4.不依赖Jquery
5.需要防止用户手动删除这个Canvas

实现分析

初始参数

size:字体大小color:字体颜色id:canvasIdtext:文本内容density:间距clarity:清晰度supportTip:Canvas不支持的文字提示

生成Canvas

根据id生成Canvas，画布大小为window.screen大小，若存在原有老的Canvas，清除并重新生成。

画布固定定位在可视窗口，z-index为-1

letbody=document.getElementsByTagName('body');letcanvas=document.createElement('canvas');canvas.style.cssText='position:fixed;width:100%;height:100%;left:0;top:0;z-index:-1;';body[0].appendChild(canvas);

指纹生成算法

letcanvas=document.getElementById(this.params.id);letcxt=canvas.getContext('2d');lettimes=window.screen.width*this.params.clarity/this.params.density;//横向文字填充次数letheightTimes=window.screen.height*this.params.clarity*1.5/this.params.density;//纵向文字填充次数cxt.rotate(-15*Math.PI/180);//倾斜画布for(leti=0;i<times;i++){for(letj=0;j<heightTimes;j++){cxt.fillStyle=this.params.color;cxt.font=this.params.size+'Arial';cxt.fillText(this.params.text,this.params.density*i,j*this.params.density);}}

防止用户删除

使用定时器，定时检查指纹是否存在

letself=this;window.setInterval(function(){if(!document.getElementById(self.params.id)){self._init();}},1000);

项目编译

使用glup编译

vargulp=require('gulp'),uglify=require("gulp-uglify"),babel=require("gulp-babel");gulp.task('minify',function(){returngulp.src('./src/index.js')//要压缩的js文件.pipe(babel()).pipe(uglify()).pipe(gulp.dest('./dist'));//压缩后的路径});

到此，相信大家对“html5中如何实现SDK水印”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！