js 添加水印_js 加水印-CSDN博客

该代码示例展示了如何利用HTML5的Canvas元素创建一个水印，通过旋转、设置字体等方法添加文本，然后使用toDataURL方法将Canvas内容转换为图片URL，再将其设置为一个固定定位的div的背景图像，实现全屏水印效果。

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

canvas画出一个水印
创建一个div
将canvas画出的水印用toDataURL()转为图片，设为div的背景图

<div class="background">
    <img src="./corpse.png" alt="小僵尸背景图">
</div>
<script>
	// 添加水印
    function setWaterMark() {
        const cav = document.createElement('canvas');
        cav.width = 120;
        cav.height = 200;
        const ctx = cav.getContext('2d');
        ctx.rotate(45 * Math.PI / 180);     // radian = degree * Math.PI / 180
        ctx.font = '12px STHeiti, SimHei';  // font-size font-family
        ctx.fillText('小僵尸哇', 60, -40, 188); // 规定在画布上输出的文本，开始绘制文本的x坐标位置（相对于画布），y坐标，允许的最大文本宽度

        const div = document.createElement('div');
    	div.style.pointerEvents = 'none';
        div.style.position = 'fixed';
        div.style.top = '0px';
        div.style.left = '0px'
        div.style.zIndex = '1000';
        div.style.width = `${document.documentElement.clientWidth}px`;
        div.style.height = `${document.documentElement.clientHeight}px`;
        div.style.background = `url(${cav.toDataURL('image/png')}) left top repeat` // 返回一个包含图片展示的 data URI
        document.body.appendChild(div);
    }
    window.onload = function() {
        setWaterMark();
    }
</script>

效果图