最近工作需求，需要在頁面上加水印，但發現網上示例無法滿足我的需求，是以還是自己動手寫。
有幾個特别需求：
1.可以寫多行水印，并且中心對齊。
2.每行水印錯開。
PS：我找到的例子都是單行水印，是以用不了，想做的效果如下。
（圖1）
實作思路
實作頁面水印主要是有兩種方法。
1.DOM元素
就是将水印放置DOM元素裡，按一定規律鋪設在目标區域。
優點：
（1）.元素計算方式相對簡單些
缺點：
（1）.目标區域長寬可能會變化，水印元素需要動态設定。
（2）.在一片區域中，可能會導緻頁面DOM元素過多。
2.canvas
先将水印寫在canvas裡，然後生成背景圖，用背景圖鋪設。
（1）.不用擔心目标區域動态變化。
（2）.計算方式複雜。
思量後，選擇了第二種實作方式，性能為重。
實作難點
1.canvas沒有針對文字的旋轉
在canvas繪圖裡面，沒有針對文字旋轉的控制，是以隻能旋轉畫布後，對每行文字一個個按規律排放。
如下圖，x0y是視區（也就是你能看到的），x’0y’是旋轉了A角度後的畫布，是以我們在畫布繪制時，每行文字的位置都要做一個修正。
（圖2）
PS：矩形代表每行文字，width是每行文字的水準間距，height是第一行文字y坐标。
得出每行文字坐标公式是（僞代碼）：
x = width * cosA;
y = x * tanA + height;
2.每行水印錯開
如果我們隻生成一行水印，那麼當做背景圖使用時候，那麼在豎方向上，都是一樣的，這樣看起來有點僵硬，如下圖。
（圖3）
是以在錯開的方法上，我使用了三個canvas，第一個canvas正式繪制，第二個将文字數組倒過來繪制，将前兩個繪制在第三個canvas上，這樣就錯開了。
3.每行文字長度不等引起的水準間距問題
如下圖，a、b是兩段文字，較長的b會導緻水準方向間距變大，如果直接使用做背景圖，那麼在背景repeat時候，将存在水準方向長短不一情況，看起來很難受。
（圖4）
對于這個問題，我的解決方法是，将a、b兩段文字水準方向上重複繪制多次，就變成繪制a、b、a、b、a、b，在足夠多的次數後，看到間距就正常。
4.第一行文字x不是從0開始
其實在畫布旋轉後，在視窗裡看到的第一行就不是從0開始（雖然繪制是0），從圖2就可以看到，還有一段距離。
(圖5)
例如将第一行移到視窗p點，那麼就要做tx、ty的修正，僞代碼：
tx = height * sinA * cosA;
ty = height * sinA * sinA;
PS：這個地方如果有人看我代碼，就會發現ty乘多一個sinA，位移才正确，這一點我也想不懂，希望有人知道告訴我。
代碼
我将代碼放到GitHub上，有啥建議請提。
最後的效果，其實就是圖1。
總結
這是個簡單的插件，代碼不多，其實本身也不需要jquery，隻是習慣性這麼實作。這裡其實有個重點，就是視區和畫布，我在svg文章裡面有總結過，可以看看，另外我遇到的幾個難點的解決辦法，希望對大家有所發現。
本文為原創文章，轉載請保留原出處，友善溯源，如有錯誤地方，謝謝指正。
本文轉自 海角在眼前 部落格園部落格，原文連結： http://www.cnblogs.com/lovesong/p/6979128.html ，如需轉載請自行聯系原作者