网页设计html最简单水印方法,前端canvas水印快速制作（附完整代码)

两种水印效果如图：

原理解析：

图一斜纹类：创建一个和页面一样大的画布，根据页面大小以及倾斜角度大致铺满水印文字，最后转化为一张图片设为背景

图二倾斜类：将文字倾斜后转化为图片，然后设置背景图片repeat填充整个页面

代码分析：

这里我只简略分析图一斜纹类，事实上这两种方式都较为简单，不需要特别强的canvas基础，只需大概了解就行，直接上完整代码吧

图一

Document

.water {

width: 100vw;

height: 2000px;

position: absolute;

top: 0;

left: 0;

background-repeat: no-repeat;

}

.content {

width: 800px;

height: 2000px;

margin-left: auto;

margin-right: auto;</