Javascript 如何使用Greasemonkey（或Tampermonkey）覆盖图形？

如何使用Greasemonkey在网站上的特定位置画一个圆圈

我试过这个，但没用：

// ==UserScript==
// @name         test
// @match        stackoverflow.com/

var canv = document.createElement('canvas');
canv.id = 'someId';

var c=document.getElementById("someId");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();

---

该代码的直接问题是没有任何地方像

.appendChild（canv）

那样用于实际将其添加到页面中

---

但是如果你真的想在第三方网站上覆盖一个人物，你需要的不仅仅是这个。
您需要：

获取目标“figure”（图像或其他节点）的句柄

创建一个相同大小的画布并将其添加到页面中

使用CSS定位步骤1中的目标节点。为了简化这一部分，我建议将目标节点包装在

或

中。见下文

根据需要绘制到画布

例如，假设目标网页有一些必须标记的kawaii图片：
     

这是一种使用完整脚本的方法：

/==UserScript==
//@name\u覆盖唯一的图像
//@match*://YOUR_SERVER.COM/YOUR_PATH/*
//@需要https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
//@grant GM_addStyle
//@grant GM.listValues
//==/UserScript==
//-需要@grant指令来恢复适当的沙箱。
var jImg=$（“img”）；
/*--将图像包含在相对位置元素中，以便画布可以使用
绝对定位飞越它。
*/
包装纸(
$（“”，{id:“gmWrpSpn”，样式：“显示：内联块；位置：相对；”}）
);
var targW=jImg[0]。宽度，targH=jImg[0]。高度；
var jCanvas=$（``）.css（{
位置：“绝对”，
排名：0，
左：0
}）。插入者（jImg）；
var cCntxt=jCanvas[0].getContext（“2d”）；
cCntxt.lineWidth=7；
cCntxt.strokeStyle='#FF8300'；
cCntxt.beginPath（）；
cCntxt.moveTo（30170）；
cCntxt.lineTo（100,30）；
cCntxt.lineTo（170170）；
cCntxt.closePath（）；
cCntxt.stroke（）；
cCntxt.beginPath（）；
cCntxt.moveTo（100,30）；
cCntxt.lineTo（100170）；
cCntxt.stroke（）；
cCntxt.beginPath（）；
cCntxt.arc（100.5127.5855,42.4145,0,2*Math.PI）；
cCntxt.stroke（）

Lorem Ipsum
您需要将画布元素添加到页面中，例如@wOxxOm，我添加了画布元素，如问题所示，但它不起作用。您没有添加它，这就是我链接示例的原因。