很多時(shí)候跟著書和不系統(tǒng)的視頻學(xué)習(xí)腹侣，會(huì)發(fā)現(xiàn)沒(méi)有方向齿穗，學(xué)了很多卻不知道自己能夠做出什么成績(jī)。
學(xué)習(xí)要有一個(gè)清晰的職業(yè)學(xué)習(xí)規(guī)劃跺株，學(xué)習(xí)過(guò)程中會(huì)遇到很多問(wèn)題复濒，你可以到我們的web學(xué)習(xí)交流君羊-點(diǎn)擊此處乒省，
同時(shí)準(zhǔn)備了基礎(chǔ)，進(jìn)階學(xué)習(xí)資料袖扛。學(xué)友都會(huì)在里面交流，分享一些學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)蛆封，每天也會(huì)準(zhǔn)時(shí)講一些項(xiàng)目實(shí)戰(zhàn)案例。
數(shù)學(xué)表達(dá)式calc()是CSS中的函數(shù)惨篱，主要用于數(shù)學(xué)運(yùn)算。使用calc()為頁(yè)面元素布局提供了便利和新的思路砸讳。相關(guān)視頻教程推薦：
本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于HTML5網(wǎng)頁(yè)水印SDK的實(shí)現(xiàn)代碼示例，有一定的參考價(jià)值绣夺，有需要的朋友可以參考一下，希望對(duì)你有所幫助陶耍。
在網(wǎng)站瀏覽中她混，常常需要網(wǎng)頁(yè)水印，以便防止用戶截圖或錄屏暴露敏感信息后坤按，追蹤用戶來(lái)源。如我們常用的釘釘軟件臭脓，聊天背景就會(huì)有你的名字。那么如何實(shí)現(xiàn)網(wǎng)頁(yè)水印效果呢来累？
網(wǎng)頁(yè)水印SDK，實(shí)現(xiàn)思路
1.能更具獲取到的當(dāng)前用戶信息嘹锁，如名字，昵稱领猾，ID等骇扇，生成圖片水印
2.生成一個(gè)Canvas，覆蓋整個(gè)窗口少孝，并且不影響其他元素
3.可以修改字體間距熬苍，大小韭山，顏色
4.不依賴Jquery
5.需要防止用戶手動(dòng)刪除這個(gè)Canvas
實(shí)現(xiàn)分析
初始參數(shù)
size: 字體大小
color: 字體顏色
id: canvasId
text: 文本內(nèi)容
density: 間距
clarity: 清晰度
supportTip: Canvas不支持的文字提示
生成Canvas
根據(jù)id生成Canvas冷溃，畫布大小為window.screen大小，若存在原有老的Canvas似枕，清除并重新生成。
畫布固定定位在可視窗口凿歼，z-index為-1
let body = document.getElementsByTagName('body');
??let canvas = document.createElement('canvas');
??canvas.style.cssText= 'position: fixed;width: 100%;height: 100%;left:0;top:0;z-index: -1;';
??body[0].appendChild(canvas);
指紋生成算法
let canvas = document.getElementById(this.params.id);
?????let cxt = canvas.getContext('2d');
?????let times = window.screen.width * this.params.clarity / this.params.density;//橫向文字填充次數(shù)
?????let heightTimes = window.screen.height * this.params.clarity * 1.5/ this.params.density; //縱向文字填充次數(shù)
?????cxt.rotate(-15*Math.PI/180); //傾斜畫布
?????for(let i = 0; i < times; i++) {
???????for(let j = 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);
???????}
?????}
防止用戶刪除
使用定時(shí)器，定時(shí)檢查指紋是否存在
let self = this;
??window.setInterval(function(){
??if (!document.getElementById(self.params.id)) {
??self._init();
??}
??}, 1000);
項(xiàng)目編譯
使用glup編譯
var gulp = require('gulp'),
??????uglify = require("gulp-uglify"),
??????babel = require("gulp-babel");
??gulp.task('minify', function () {
??????return gulp.src('./src/index.js') // 要壓縮的js文件
??????.pipe(babel())
??????.pipe(uglify())
??????.pipe(gulp.dest('./dist')); //壓縮后的路徑
??});
以上就是HTML5網(wǎng)頁(yè)水印SDK的實(shí)現(xiàn)方法的詳細(xì)內(nèi)容答憔，
相關(guān)鏈接：
詳解html中頁(yè)面跳轉(zhuǎn)傳遞參數(shù)的問(wèn)題
關(guān)于書籍：需要學(xué)習(xí)資料的小伙伴們可以加群，點(diǎn)擊此處
