前些時(shí)間應(yīng)為工作需要制作網(wǎng)頁水印功能，一開始沒做過，感覺挺高大上的功能，所有就去問了下度娘，然后看到一篇博客里面寫的，看了效果覺得還不錯(cuò)，然后就download下來改吧改吧，就用了

1.Dom水印

Paste_Image.png

這個(gè)插件原理也很簡(jiǎn)單，就是根據(jù)屏幕的高寬，計(jì)算水印塊的數(shù)量，然后動(dòng)態(tài)生成一個(gè)個(gè)div，定位到頁面最上層。那么問題來了，如果這些水印是蓋在上面的就會(huì)影響頁面的操作交互，后來在評(píng)論區(qū)發(fā)現(xiàn)了一個(gè)新的屬性“pointerEvents”，把div的這個(gè)屬性設(shè)置為“none”就可以穿透點(diǎn)擊了，水印就像云彩一樣飄在上面但卻不影響你對(duì)頁面的操作（如click,hover等事件都會(huì)正常觸發(fā)）。

• 原文地址：http://www.cnblogs.com/GongQi/p/4074609.html

2.canvas水印

后來因?yàn)槲覀兊捻撁鎯?nèi)容比較多，且用了iview渲染，頁面比較卡，想在頁面性能上做一下優(yōu)化，水印用上一個(gè)方法創(chuàng)建dom,會(huì)比較耗內(nèi)存，所以做了一下優(yōu)化，改用H5的canvas話。因?yàn)樗?nèi)容是動(dòng)態(tài)的，所以我的原理是先用canvas畫出水印，然后在使用canvas的canvas.toDataURL("image/png")方法生成圖片，然后在放到一個(gè)div里面平鋪。這個(gè)div定位到頁面上面，ok搞定，發(fā)現(xiàn)代碼比第一個(gè)少了很多。

$('body').append($('<canvas id="canvas" height="80" width="120"></canvas>'));
    var canvas = document.getElementById('canvas');
    var mask_div = document.createElement('div');
    var ctx = canvas.getContext("2d");
    ctx.font="normal 16px Microsoft Yahei"; //設(shè)置樣式
    ctx.fillStyle = '#ccc';
    ctx.rotate(20*Math.PI/180);
    ctx.fillText("XXX",30,20);
    ctx.font="normal 12px Microsoft Yahei"; //設(shè)置樣式
    ctx.fillText("補(bǔ)充信息XXX",15,40);
    document.body.appendChild(canvas);
    var src = canvas.toDataURL("image/png");
    mask_div.style.position = 'fixed';
    mask_div.style.zIndex = '9999';
    mask_div.style.top = '0';
    mask_div.style.left = '0';
    mask_div.style.height = '100%';
    mask_div.style.width = '100%';
    mask_div.style.backgroundImage='URL(' + src + ')';
    document.body.appendChild(mask_div);
    $(canvas).remove();

效果圖

Paste_Image.png