用js实现一个水印效果。效果图如下:
之前在网上看到一个思路,先用canvas画一个小的水印,然后再在一个大的画布上重复平铺之前画好的canvas。
实际做出来之后发现如果水印区域过大的话,平铺canvas需要耗费巨大的性能,甚至会导致页面崩溃。所以改用背景图的形式展现,只需要将生成的canvas到处为base64的数据,并赋给水印区域的背景属性,同时设置background-repeat: repeat;
即可。
接下来我们一步一步的实现我们想要的效果。
HTML
由于水印一般为当前用户的名字或者邮箱,所以需要实时计算小水印的宽高。
最准确的方式当然是直接放到页面里面,再用js去取。
初始html源代码如下:
1 | <body> |
CSS
1 | /* 单个水印块 需要设置好字体和字号,不需要出现在可视区域 */ |
JS
水印倾斜角度为30度。示意图如下:
初始位置如下
1 |
|