使用jQuery实现文本水印

admin 发布于：2024-12-10 09:35:38

阅读：loading

使用JS的Canvas画布绘制一个文本，把Canvas转换为图片，再把图片设置为body元素的背景图，就有了本篇文章的水印实现。

1.示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试水印</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.watermark.js"></script>
    <script type="text/javascript">
        $(function () {
            //demo1默认调用
            $.watermark();
            //demo2 debug模式
            $.watermark({
                renderTo: "#debug_id",
                debug: true,
                tags: ["chendd"]
            });
        });
    </script>
</head>
<body>
    <div id="debug_id" style="width:100%;height:360px;">

    </div>
</body>
</html>

2.示例效果