.jpg)
用JavaScript實(shí)現(xiàn)水印效果可以使用以下方法：1. 創(chuàng)建一個(gè)包含文本的div元素，并將其固定在頁面中央。2. 使用canvas繪制水印并將其設(shè)置為頁面的背景，以實(shí)現(xiàn)更復(fù)雜的效果。3. 使用mutationobserver監(jiān)控dom變化，防止水印被移除。這些方法各有優(yōu)缺點(diǎn)，具體選擇應(yīng)根據(jù)需求決定。
用JavaScript實(shí)現(xiàn)水印效果？這可是一個(gè)既有趣又有挑戰(zhàn)性的問題！讓我們從一個(gè)簡(jiǎn)單的實(shí)現(xiàn)開始，然后深入探討如何讓它變得更加精致和靈活。
實(shí)現(xiàn)水印效果的基本思路是通過JavaScript動(dòng)態(tài)創(chuàng)建一個(gè)包含文本或圖像的層，然后將這個(gè)層疊加在頁面內(nèi)容之上。聽起來簡(jiǎn)單，但實(shí)際上有很多細(xì)節(jié)需要處理，比如如何確保水印不被用戶輕易移除、如何在不同的設(shè)備和瀏覽器上保持一致性等。
首先，我們來看一個(gè)基礎(chǔ)的實(shí)現(xiàn)。這個(gè)方法的優(yōu)點(diǎn)在于簡(jiǎn)單易懂，但也有一些限制，比如在頁面內(nèi)容變化時(shí)，水印不會(huì)自動(dòng)調(diào)整位置。
立即學(xué)習(xí)“Java免費(fèi)學(xué)習(xí)筆記（深入）”；
// 創(chuàng)建一個(gè)水印div const watermark = document.createElement('div'); watermark.textContent = '我的水印'; watermark.style.position = 'fixed'; watermark.style.top = '50%'; watermark.style.left = '50%'; watermark.style.transform = 'translate(-50%, -50%)'; watermark.style.color = 'rgba(0, 0, 0, 0.1)'; watermark.style.fontSize = '50px'; watermark.style.zIndex = '9999'; watermark.style.pointerEvents = 'none'; // 將水印添加到頁面中 document.body.appendChild(watermark);
這個(gè)簡(jiǎn)單的實(shí)現(xiàn)雖然能快速展示效果，但如果我們想要更復(fù)雜的水印，比如重復(fù)的背景圖案，或者能夠適應(yīng)不同頁面內(nèi)容大小的水印，就需要更進(jìn)一步的處理。
我曾經(jīng)在一個(gè)項(xiàng)目中實(shí)現(xiàn)過這種復(fù)雜的水印，那時(shí)我們需要確保水印在頁面滾動(dòng)、縮放時(shí)都能保持一致的效果。為此，我們使用了Canvas來繪制水印，然后將其設(shè)置為頁面的背景。這種方法的好處是可以更靈活地控制水印的樣式和位置，但也增加了代碼復(fù)雜度和性能開銷。
讓我們來看看如何用Canvas實(shí)現(xiàn)這種效果：
// 創(chuàng)建一個(gè)Canvas元素 const canvas = document.createElement('canvas'); canvas.width = 200; canvas.height = 150; const ctx = canvas.getContext('2d'); // 設(shè)置文本樣式 ctx.font = '20px Arial'; ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; ctx.rotate(-Math.PI / 4); // 繪制文本 ctx.fillText('我的水印', 20, 100); // 將Canvas內(nèi)容轉(zhuǎn)換為背景圖像 const pattern = document.createElement('div'); pattern.style.backgroundImage = `url(${canvas.toDataURL()})`; pattern.style.position = 'fixed'; pattern.style.top = '0'; pattern.style.left = '0'; pattern.style.width = '100%'; pattern.style.height = '100%'; pattern.style.zIndex = '9999'; pattern.style.pointerEvents = 'none'; // 將水印添加到頁面中 document.body.appendChild(pattern);
這種方法的優(yōu)勢(shì)在于可以創(chuàng)建重復(fù)的圖案，并且可以很容易地調(diào)整水印的角度、透明度等屬性。但需要注意的是，使用Canvas可能會(huì)在一些低端設(shè)備上造成性能問題，特別是當(dāng)頁面內(nèi)容復(fù)雜時(shí)。
在實(shí)際應(yīng)用中，我發(fā)現(xiàn)了一個(gè)有趣的現(xiàn)象：有些用戶會(huì)嘗試通過瀏覽器的開發(fā)者工具來移除水印。為了防止這種情況，我們可以使用MutationObserver來監(jiān)控DOM變化，一旦發(fā)現(xiàn)水印被移除，就立即重新添加它。
// 使用MutationObserver監(jiān)控DOM變化 const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (mutation.removedNodes && mutation.removedNodes.length > 0) { for (let i = 0; i <p>這種方法雖然增加了代碼復(fù)雜度，但大大提高了水印的安全性，防止了用戶輕易移除水印。</p><p>總的來說，實(shí)現(xiàn)水印效果的方法有很多，每種方法都有其優(yōu)缺點(diǎn)。選擇哪種方法取決于你的具體需求，比如性能要求、安全性需求、以及你希望水印在頁面上的表現(xiàn)形式。我希望這些方法和經(jīng)驗(yàn)分享能幫助你更好地實(shí)現(xiàn)水印效果，同時(shí)也希望你能在實(shí)踐中不斷探索和優(yōu)化。</p>
.png)
