canvas实现平铺水印

Posted 2020-11-28 10manongit

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

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

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;