旋转水印（网址定制）

Greasy Fork is available in English.
旋转水印（网址定制）

在左上角显示旋转 45° 的文字水印，可定制梯形背景、透明度、颜色、大小等
换行
// ==UserScript==
// @name         旋转水印（网址定制）
// @namespace    http://tampermonkey.net/
// @version      1.8
// @description  在左上角显示旋转 45° 的文字水印，可定制梯形背景、透明度、颜色、大小等
// @author       aotmd
// @match        *://*/*
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // ✅ 网址配置（不同网站不同样式）
    const config = {
        "example.com": {
            text: "示例网站",
            fontSize: 24,
            textColor: "#000000",
            backgroundColor: "#ffcccc",
            opacity: 0.6,
            trapezoidHeight: 30,  // 梯形高度
            strokeColor: "#ff0000"
        },
        "10.80.20.111": {
            text: "测试环境",
            fontSize: 30,
            textColor: "#ffffff",
            backgroundColor: "blue",
            opacity: 0.7,
            trapezoidHeight: 35,
            strokeColor: "#ffffff"
        },
        "10.97.192.86": {
            text: "开发环境",
            fontSize: 30,
            textColor: "#ffffff",
            backgroundColor: "#ff0000",
            opacity: 0.7,
            trapezoidHeight: 35,
            strokeColor: "#ffffff"
        }
    };

    // 获取当前网站的 host
    const host = window.location.hostname;
    let siteConfig = null;
    for (const site in config) {
        if (host.includes(site)) {
            siteConfig = config[site];
            break;
        }
    }

    // 如果当前网址有匹配的配置，则生成水印
    if (siteConfig) {
        const { text, fontSize, textColor, backgroundColor, opacity, trapezoidHeight, strokeColor } = siteConfig;

        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");

        // 计算文字尺寸
        ctx.font = `${fontSize}px Arial`;
        const textWidth = fontSize * 3.11;
        const textHeight = fontSize * 1.5; // 文字高度

        // 计算旋转后画布大小
        const canvasSize = Math.ceil(Math.sqrt((textWidth + trapezoidHeight * 2) ** 2 + (textHeight + trapezoidHeight * 2) ** 2));
        canvas.width = canvasSize;
        canvas.height = canvasSize;

        // 旋转画布
        ctx.translate(canvasSize / 2, canvasSize / 2);
        ctx.rotate(-Math.PI / 4); // 逆时针旋转 45°
        ctx.translate(-canvasSize / 2, -canvasSize / 2);

        // ✅ 绘制“底边 45° 的梯形”背景
        ctx.globalAlpha = opacity;
        ctx.fillStyle = backgroundColor;
        ctx.beginPath();

        // 根据梯形高度计算底边的基线长度
        const diagonalLength = Math.sqrt(Math.pow(canvasSize, 2) * 2); // 画布的对角线
        const bottomWidth = diagonalLength;  // 底边等于对角线

        // 设置梯形的高度（垂直方向增加）
        const topWidth = textWidth * 999;  // 上边较短
        const centerX = canvasSize / 2;
        const bottomY = fontSize+trapezoidHeight;  // 梯形底边的基线在画布的底部基线位置
        const topY = bottomY - fontSize-trapezoidHeight; // 高度垂直向上增加
        debugger

        // 计算梯形的四个顶点
        ctx.moveTo(centerX - topWidth / 2, topY);  // 顶边左侧
        ctx.lineTo(centerX + topWidth / 2, topY);  // 顶边右侧
        ctx.lineTo(centerX + bottomWidth / 2, bottomY); // 底边右侧
        ctx.lineTo(centerX - bottomWidth / 2, bottomY); // 底边左侧
        ctx.closePath();
        ctx.fill();

        // ✅ 绘制边框
        ctx.strokeStyle = strokeColor;
        ctx.lineWidth = 2;
        ctx.stroke();

        // ✅ 绘制文字
        ctx.fillStyle = textColor;
        ctx.globalAlpha = 1; // 文字不透明
        ctx.textAlign = "center";  // 水平居中
        ctx.textBaseline = "middle"; // 垂直居中
        ctx.font = `${fontSize}px Arial`; // 设置文字大小
        ctx.fillText(text, centerX, (topY + bottomY) / 2);  // 文字垂直居中

        // ✅ 生成图片并插入页面
        const img = document.createElement("img");
        img.src = canvas.toDataURL();
        img.style.position = "fixed";
        img.style.top = "0px";
        img.style.left = "0px";
        img.style.zIndex = "9999";
        img.style.pointerEvents = "none"; // 让鼠标事件穿透
        document.body.appendChild(img);
    }
})();