欲实现的水印平铺的效果图如下：
canvas实现平铺水印效果图
从图上看，应该做到以下几点：
- 文字在X和Y方向上进行平铺；
- 文字进行了一定的角度的旋转；
- 水印作为背景，其z-index位置应位于页面内容底部, 即不能覆盖页面主内容；
- 平铺的水印应能随窗口大小改变进行自适应。
思路：
首先我们先在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;
