用canvas给界面添加文字水印_cavans 签名设置背景文字-CSDN博客

本文链接：https://blog.csdn.net/thundor/article/details/51516618

本文介绍了一种利用HTML5的Canvas元素来实现在网页上添加透明文字水印的方法。通过JavaScript操作Canvas上下文，绘制特定的文字并将其作为背景图片应用到指定的div元素中，从而达到显示水印的效果。

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

<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <meta charset="UTF-8">
    <title>Document</title>

	<style>

	</style>
</head>
<canvas style="display:none;" id="can" width="350" height="350"></canvas>

<p>asasas</p>
<img src="http://img2.3lian.com/2014/f2/152/d/87.jpg" />
<p>asasas</p>
<p>asasas</p>
<p>asasas</p>
<p>asasas</p>
<p>asasas</p>
<p>asasas</p>
<p>asasas</p>
<p>asasas</p>
<p>asasas</p>
<p>asasas</p>
<p>asasas</p>
<p>asasas</p>
<p>asasas</p>
<div id="WaterMark"></div>
<script>
(function() {
	$('#WaterMark').css({
        "position": "absolute",
        "left": "0",
        "top": "50px",
        "height": $(document).height()-50,
        "opacity": "1",
        "width": "100%",
        "z-index": "900"
    });
	var canvas = document.getElementById('can');
	if(!canvas.getContext) {
		//你的浏览器不支持canvas!
		return;
	}
	ctx = canvas.getContext('2d');
	ctx.font="30px Microsoft YaHei";
	ctx.rotate(-45*Math.PI/180);
	ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
	ctx.fillText("Hello World",-100,220);
	document.getElementById('WaterMark').style.backgroundImage = 'url("' + ctx.canvas.toDataURL() + '")';
})();
</script>
</body>