canvas實現平鋪水印

欲實現的水印平鋪的效果圖如下：

從圖上看，應該做到以下幾點：

1. 文字在X和Y方向上進行平鋪；

2. 文字進行了一定的角度的旋轉；

3. 水印作為背景，其z-index位置應位於頁面內容底部, 即不能覆蓋頁面主內容；

4. 平鋪的水印應能隨窗口大小改變進行自適應。

思路：

首先我們先在canvas上繪制如下圖所示一小塊畫布：

var tpl = '<canvas id = "watermark" width = "160px"  height = "100px" style="display:none;"></canvas>';

將單一水印繪制在canvas畫布里，然后將canvas節點插入到需要平鋪水印的容器里，例如這里將canvas標簽插入到body里面。

$(document.body).append(tpl);

這里簡要說明：canvas標簽width height屬性，若不進行指定，則會有個默認的大小（300px * 150px），並且，這塊畫布的大小使用外部css文件設定寬高是無效的。

下面開始在canvas里面繪制單一水印：

var cw = $('#watermark')[0];   
var ctx = cw.getContext("2d");   //返回一個用於在畫布上繪圖的環境
ctx.cearRect(0,0,160,100);  //繪制之前畫布清除
ctx.font="20px 黑體";  
ctx.rotate(-20*Math.PI/180);
ctx.fillStyle = "rgba(100,100,100,0.1)";
ctx.fillText("465dd92381", -20, 80);
ctx.rotate('20*Math.PI/180');  //坐標系還原

實現了一小塊畫布的繪制以后，再建一個canvas畫布(id為repeat-watermark):

var tplr = '<canvas id = "repeat-watermark"></canvas>'; 
$(document.body).append(tplr);

為整塊畫布設定樣式：

#repeat-watermark{
   position:fixed;
   z-index:-1;
   top:0;
   background: #fff;
}

z-index的值可以根據需要調整，使其位於頁面底部平鋪。
另作一點說明：位於水印上層的頁面如果想讓水印始終可見，可以將頁面中使用的顏色使用rgba設置。

下面將前面繪制的id為watermark的canvas 在當前的canvas（id為repeat-watermark）里采用createPattern方法進行平鋪：

var crw = $('#repeat-watermark')[0];  
crw.width = $(document).width();
crw.height = $(document).height();
ctxr = crw.getContent("2d");
ctxr.clearRect(0,0,crw.width,crw.height);  //清除整個畫布 
var pat = ctxr.createPattern(cw, "repeat");    //在指定的方向上重復指定的元素  
ctxr.fillStyle = pat;  
ctxr.fillRect(0, 0, crw.width, crw.height);

此時還有一個問題，由於水印繪制只隨着頁面進行了一次加載，因而當窗口改變大小時，頁面背景水印不會跟隨改變進行填充或者裁剪，而是會出現空白，因此，將上述繪制水印封裝為draw方法，然后添加以下事件：

$(window).resize(function(){
   var w = $(document).width();
   var h = $(document).height();
   self.draw(w, h);
});

下面附上源碼：

'use strict';

require('./watermark.css');

var Watermark = function(container, options) {
    var self = this;
    self.opt = {
        docWidth: $(document).width(),
        docHeight: $(document).height(),
        fontStyle: "20px 黑體", //水印字體設置
        rotateAngle: -20 * Math.PI / 180, //水印字體傾斜角度設置
        fontColor: "rgba(100, 100, 100, 0.1)", //水印字體顏色設置
        firstLinePositionX: -20, //canvas第一行文字起始X坐標
        firstLinePositionY: 80, //Y
        SecondLinePositionX: 0, //canvas第二行文字起始X坐標
        SecondLinePositionY: 70 //Y
    };
    $.extend(self.opt, options);
    self.render(container);
    self.draw(self.opt.docWidth, self.opt.docHeight);
    self.events();
};

Watermark.prototype = {
    render: function(d) {
        var self = this;
        d.append(tpl);
    },

    draw: function(docWidth, docHeight) {
        var self = this;
        var cw = $('#watermark')[0];
        var crw = $('#repeat-watermark')[0];

        crw.width = docWidth;
        crw.height = docHeight;

        var ctx = cw.getContext("2d");
        //清除小畫布
        ctx.clearRect(0, 0, 160, 100);
        ctx.font = self.opt.fontStyle;
        //文字傾斜角度
        ctx.rotate(self.opt.rotateAngle);

        ctx.fillStyle = self.opt.fontColor;
        //第一行文字
        ctx.fillText(self.opt.watermark, self.opt.firstLinePositionX, self.opt.firstLinePositionY);
        //第二行文字 
        //ctx.fillText(window.watermark.mobile, self.opt.SecondLinePositionX, self.opt.SecondLinePositionY);
        //坐標系還原
        ctx.rotate(-self.opt.rotateAngle);

        var ctxr = crw.getContext("2d");
        //清除整個畫布
        ctxr.clearRect(0, 0, crw.width, crw.height);
        //平鋪--重復小塊的canvas
        var pat = ctxr.createPattern(cw, "repeat");
        ctxr.fillStyle = pat;

        ctxr.fillRect(0, 0, crw.width, crw.height);
    },
    events: function() {
        var self = this;
        $(window).resize(function() {
            var w = $(document).width();
            var h = $(document).height();
            self.draw(w, h);
        });
    }

};

var tpl = '<canvas id = "watermark" width = "160px"  height = "100px" style="display:none;"></canvas>' + '<canvas id = "repeat-watermark"></canvas>';

module.exports = Watermark;