canvas全屏水印

Canvas 全屏水印通常是指在 HTML5 的 `<canvas>` 元素上添加一个透明度较低的图像或文字，使其在整个页面背景中显示出来，即使canvas内容被放大或缩小时，水印也会保持始终可见。这样做的目的是为了保护版权或者提供品牌标识。

实现canvas全屏水印的方法主要包括以下几个步骤：

1. 创建 canvas 元素：首先在 HTML 中创建一个 `<canvas>` 标签，并设置其宽度和高度与浏览器视窗相同，使用 `requestAnimationFrame` 或 `window.onload` 来确保 canvas 加载完成。

<canvas id="watermark-canvas"></canvas>

2. 绘制水印：在 JavaScript 中，获取 canvas 的上下文 (`context`)，然后在每一帧（动画循环）里绘制水印。你可以选择一个半透明的背景色（如 rgba(0,0,0,0.5)）作为水印，然后在其上绘制文本或图片。

const canvas = document.getElementById('watermark-canvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

function drawWatermark() {
  ctx.fillStyle = 'rgba(0,0,0,0.5)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 绘制文字水印
  const text = 'Your Watermark Text';
  ctx.font = '16px Arial';
  ctx.fillStyle = 'white';
  ctx.fillText(text, 10, canvas.height - 20);
}

// 添加到动画循环
requestAnimationFrame(drawWatermark);

3. 动态调整：如果你希望水印跟随窗口大小变化，你需要在 `drawWatermark` 函数中更新 canvas 的尺寸。

4. 隐藏canvas本身：为了完全实现全屏效果，可以设置 `canvas` 的 `display` 属性为 `none`，使实际的画布内容不显示，只留下水印。

canvas.style.display = 'none';