HTML5代码如何实现水印效果 HTML5代码Canvas叠加层的制作

<canvas id="watermark" style="position: absolute; top: 0; left: 0; pointer-events: none; z-index: 999; opacity: 0.2;"></canvas>
<p><script>
function createWatermark(text = '私密文件', font = '20px Microsoft YaHei', fillStyle = 'red') {
const canvas = document.getElementById('watermark');
const ctx = canvas.getContext('2d');</p><p>// 设置画布尺寸为窗口大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;</p><p>// 文字旋转角度和间距
const angle = -30 * Math.PI / 180;
const stepX = 200;
const stepY = 100;</p><p>ctx.font = font;
ctx.fillStyle = fillStyle;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';</p><p>// 绘制网格状水印
for (let x = 0; x < canvas.width; x += stepX) {
for (let y = 0; y < canvas.height; y += stepY) {
ctx.save();
ctx.translate(x + stepX/2, y + stepY/2);
ctx.rotate(angle);
ctx.fillText(text, 0, 0);
ctx.restore();
}
}
}
// 调用生成水印
createWatermark('机密 - 张三');
</script></p>

const container = document.getElementById('contentArea');
const rect = container.getBoundingClientRect();
<p>const canvas = document.createElement('canvas');
canvas.width = rect.width;
canvas.height = rect.height;
canvas.style.cssText = <code> position: absolute; top: ${rect.top}px; left: ${rect.left}px; pointer-events: none; z-index: 999; opacity: 0.15; </code>;
document.body.appendChild(canvas);</p><p>// 在canvas上绘制水印（同上）
const ctx = canvas.getContext('2d');
ctx.font = 'bold 30px Arial';
ctx.fillStyle = 'gray';
ctx.rotate(-30 * Math.PI / 180);
ctx.fillText('内部资料', 50, 100);</p>

const img = new Image();
img.src = 'logo.png';
img.onload = function() {
  ctx.drawImage(img, 0, 0, 50, 50); // 绘制小图标
}