canvas结合background实现水印平铺效果

最新推荐文章于 2025-07-02 16:11:33 发布

原创最新推荐文章于 2025-07-02 16:11:33 发布 · 2.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #canvas #水印 #HTML #vue

项目积累专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何利用HTML的canvas元素结合背景图片，实现在网页上平铺水印的效果，特别适用于Vue.js项目中。通过绘制canvas并设置重复背景，可以创建自定义的透明水印，增强网站的版权保护。

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

canvas结合background实现水印平铺效果


	const text1 = '水印文字1'
	const text2 = '水印文字2'
	let canvas = document.createElement('canvas');
	canvas.height = canvas.width = '200';
	let ctx = canvas.getContext("2d");
	ctx.clearRect(0, 0, 200, 200);  //绘制之前画布清除
	ctx.font = "32px 黑体";
	ctx.rotate(-20 * Math.PI / 180); //为了实现水印倾斜效果,旋转画布坐标系
	ctx.fillStyle = "rgba(100,100,100,0.15)"; //画笔颜色
	ctx.fillText(shopName, -20, 80); //书写的内容及位置
	ctx.fillText(shopCode, 0, 120); //书写的内容及位置
	// ctx.rotate('20*Math.PI/180');  //坐标系还原,如果后续没有其他操作,这一步可以省略
	
	// 将canvas的内容转换为base64编码
	let data = canvas.toDataURL('image/png', 1);  //1表示质量(无损压缩)
	
	// 将容器的的背景图片设置为生成的base64图片,并平铺
	this.$refs.container.style.background = "url(" + data + ") repeat"  //