欲实现的水印平铺的效果图如下：

从图上看，应该做到以下几点：

文字在X和Y方向上进行平铺；

文字进行了一定的角度的旋转；

水印作为背景，其z-index位置应位于页面内容底部, 即不能覆盖页面主内容；

平铺的水印应能随窗口大小改变进行自适应。

思路：

首先我们先在canvas上绘制如下图所示一小块画布：

将单一水印绘制在canvas画布里，然后将canvas节点插入到需要平铺水印的容器里，例如这里将canvas标签插入到body里面。

这里简要说明：canvas标签width height属性，若不进行指定，则会有个默认的大小（300px * 150px），并且，这块画布的大小使用外部css文件设定宽高是无效的。

下面开始在canvas里面绘制单一水印：

实现了一小块画布的绘制以后，再建一个canvas画布(id为repeat-watermark):

为整块画布设定样式：

z-index的值可以根据需要调整，使其位于页面底部平铺。 另作一点说明：位于水印上层的页面如果想让水印始终可见，可以将页面中使用的颜色使用rgba设置。

下面将前面绘制的id为watermark的canvas 在当前的canvas（id为repeat-watermark）里采用createPattern方法进行平铺：

此时还有一个问题，由于水印绘制只随着页面进行了一次加载，因而当窗口改变大小时，页面背景水印不会跟随改变进行填充或者裁剪，而是会出现空白，因此，将上述绘制水印封装为draw方法，然后添加以下事件：

下面附上源码：