canvas水印 字体倾斜

Canvas 是 HTML5 中的一个绘图 API，用于在网页上动态创建图形和视觉效果，包括添加水印。要在 Canvas 上添加字体倾斜的水印，你可以按照以下步骤操作：

1. **创建 Canvas 元素**：
在 HTML 中创建一个 `<canvas>` 标签，设置其宽度和高度，例如：

   <canvas id="myCanvas" width="800" height="600"></canvas>

2. **获取 Canvas 和上下文**：
使用 JavaScript 获取这个 canvas 元素并创建绘图上下文：

   var canvas = document.getElementById('myCanvas');
   var ctx = canvas.getContext('2d');

3. **设置字体倾斜**：
在绘制文本之前，你需要设置文本的样式，包括倾斜。使用 `ctx.font` 设置字体，然后用 `ctx.textAlign` 和 `ctx.textBaseline` 控制文本对齐方式。要倾斜，可以调用 `ctx.rotate()` 函数：

   ctx.font = '30px Arial';
   ctx.save(); // 保存当前状态，因为旋转后需要恢复
   ctx.rotate(Math.PI / 4); // 倾斜 45 度

4. **添加水印文本**：
用 `ctx.fillText()` 或 `ctx.strokeText()` 方法绘制倾斜的文本，这里假设你的水印文字是 "Watermark"：

   ctx.fillText("Watermark", 50, 50);

5. **恢复画布状态**：
当你完成倾斜文本的绘制后，需要恢复到原始的画布状态，以免影响后续的绘制：

   ctx.restore();

6. **显示 Canvas**：
最后，你需要调用 `canvas.toDataURL()` 将 Canvas 内容转换为图片 URL，以便于显示或下载。