前端水印功能

最新推荐文章于 2025-06-26 11:09:47 发布

原创

最新推荐文章于 2025-06-26 11:09:47 发布 · 935 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了如何利用canvas技术创建水印图片，并将其作为页面背景进行上下左右平铺，从而实现在前端添加水印的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：使用canvas制作一个水印图片然后做为页面的背景色上下左右平铺

制作完美

<html>
	<head></head>
	<body>
		<div>
			<a href="baidu.com">超链接</a>
			<div class="c-circle"></div>
			<div class="c-triangle"></div>
			<div class="c-dialog"></div>
			<div class="c-diamond"></div>
			<div class="c-parallelogram"></div>
			<div class="c-star"></div>
		</div>
	</body>
	<script>
		(function () {
	      // canvas 实现 watermark
	      function __canvasWM({
	        // 使用 ES6 的函数默认值方式设置参数的默认取值
	        container = document.body,
	        width = '200px',
	        height = '150px',
	        textAlign = 'center',
	        textBaseline = 'middle',
	        font = "20px microsoft yahei",
	        fillStyle = 'rgba(184, 184, 184, 0.8)',
	        content = '请勿外传',
	        rotate = '30',
	        zIndex = 1000
	      }