HTML5基礎 網頁水印SDK的實現方法

2021-09-19 13:24:12 字數 1794 閱讀 1264

網頁水印sdk,實現思路

1.能更具獲取到的當前使用者資訊,如名字,暱稱,id等,生成水印

2.生成乙個canvas,覆蓋整個視窗,並且不影響其他元素

3.可以修改字型間距,大小,顏色

4.不依賴jquery

5.需要防止使用者手動刪除這個canvas

實現分析

初始引數

size: 字型大小

color: 字型顏色

id: canvasid

text: 文字內容

density: 間距

clarity: 清晰度

supporttip: canvas不支援的文字提示

生成canvas

根據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;';

指紋生成演算法

let canvas = document.getelementbyid(this.params.id);

let cxt = canvas.getcontext('2d');

let times = window.screen.width * this.params.clarity / this.params.density;//橫向文字填充次數

let heighttimes = window.screen.height * this.params.clarity * 1.5/ this.params.density; //縱向文字填充次數

cxt.rotate(-15*math.pi/180); //傾斜畫布

for(let i = 0; i < times; i++)

}防止使用者刪除

使用定時器,定時檢查指紋是否存在

let self = this;

window.setinterval(function()

}, 1000);

專案編譯

使用glup編譯

推薦理由:

《html5從入門到精通》由千鋒教育編著,清華大學出版社出版,

【產品亮點】

★專案案例居多,講究實用性。

★內容徐徐漸進,通俗易懂。

★千鋒教育結合市場人才需求來制定知識點。

★快樂學習,實戰就業,提高就業率。

HTML5基礎 網頁的基本標籤

world wide web consortium 全球資訊網聯盟 成立於1994年,web技術領域最權威和具影響力的國際中立性技術標準機構 w3c標準包括 結構化標準語言 xhtml xml 表現標準語言 css 行為標準 dom ecmascript 這是頭部檔案 我的第乙個網頁 title h...

網頁錄音,html5錄音

第乙個是在第二個的基礎上擴充套件出來的,使用flash模組實現錄音功能 第乙個已經實現了錄音並上傳到伺服器的功能,但是有個問題是錄音中雜音太大,鑑於自身技術水平不支援優化原始碼,所以基本是被嫌棄了 第三個是使用 html5 的 audio api 實現的,如果不考慮 ie 的話,是非常推薦的 以上是...

html5 基礎開始

下面進入h5開發的基礎階段 想要製作乙個合格的網頁,基礎標籤就是根本,h5中的標籤可分為行標籤 a,b,s,u,i,sub,sup,strong,em,img,input等 和塊標籤 h1 h6,p,div,hr,ul,ol,dl,li dt,dd等 兩種,這兩種標籤都以自己的特性,熟練掌握他們的特...