如何用Greasemonkey/Tampermonkey叠加网页图形及绘制指定位置圆形？

嘿，我来帮你搞定这两个问题——先讲通用的实现步骤，再帮你排查代码失效的原因：

一、基础实现步骤 #

要在网页上叠加图形，核心是用canvas元素作为绘图载体，步骤很清晰：

• 创建画布：用document.createElement('canvas')生成canvas元素，这是我们的绘图板。
• 配置画布样式：必须给canvas设置position: fixed或absolute，再加上足够的宽高和高z-index，不然它要么小到看不见，要么被页面元素盖住。
• 挂载画布到页面：通过document.body.appendChild(canv)把画布加到页面里，这样它才会出现在DOM中。
• 绘制图形：用canvas.getContext('2d')拿到2D绘图上下文，然后调用arc、rect这类API就能画你想要的图形了。

二、你的代码未生效的原因及修正 #

看了你贴的代码，有几个关键问题导致图形没显示：

1. UserScript元信息不完整：你的元信息块没闭合（缺少// ==/UserScript==），@match也没写完整的URL和引号，脚本可能根本没正确加载。
2. 画布没添加到页面：你创建了canvas，但没把它挂载到DOM树里，相当于画在了一个看不见的画布上，自然看不到效果。
3. 冗余的DOM查询：刚创建的canvas已经在canv变量里了，没必要再用getElementById去获取，多此一举还容易出错。
4. 画布无样式配置：默认canvas宽高很小，也没定位，就算画了图形也可能被挡住或者在看不见的角落。

这里是修正后的可运行代码：

// ==UserScript==
// @name         网页圆形叠加测试
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  在stackoverflow页面绘制一个红色圆形
// @author       You
// @match        https://stackoverflow.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 创建canvas元素
    const canv = document.createElement('canvas');
    canv.id = 'customCircleCanvas';
    // 设置画布样式：固定定位在最上层，覆盖整个窗口
    canv.style.position = 'fixed';
    canv.style.top = '0';
    canv.style.left = '0';
    canv.style.zIndex = '9999'; // 确保在所有元素之上
    canv.style.pointerEvents = 'none'; // 可选：让画布不阻挡页面点击
    canv.width = window.innerWidth;
    canv.height = window.innerHeight;

    // 把画布添加到页面body
    document.body.appendChild(canv);

    // 获取绘图上下文并绘制圆形
    const ctx = canv.getContext('2d');
    ctx.beginPath();
    ctx.arc(100, 75, 50, 0, 2 * Math.PI); // 圆心(100,75)，半径50
    ctx.strokeStyle = '#ff0000'; // 红色描边
    ctx.lineWidth = 3; // 线条粗细
    ctx.stroke();
})();

修正说明： #

• 补全了规范的UserScript元信息，确保脚本能正确匹配stackoverflow页面。
• 添加了pointerEvents: none（可选），这样画布不会影响页面上的点击操作。
• 设置了红色描边和粗线条，让圆形更显眼，方便你测试效果。
• 直接使用创建好的canv变量操作，避免冗余的DOM查询。

内容的提问来源于stack exchange，提问作者Vitor Abella