节点 | GM drawRectangle()函数

简介

drawRectangle()是Greasemonkey脚本的一个重要函数，用于在页面上绘制矩形。它可以帮助我们快速定位页面中的某一区域，并进行相应的操作。

语法

GM.drawRectangle(x, y, width, height, borderColor, borderWidth, backgroundColor);

参数说明：

• x：矩形左上角的x坐标；
• y：矩形左上角的y坐标；
• width：矩形的宽度；
• height：矩形的高度；
• borderColor：矩形的边框颜色；
• borderWidth：矩形的边框宽度；
• backgroundColor：矩形的背景颜色。

示例

下面是一个简单的示例，使用drawRectangle()在页面上绘制一个红色的矩形：

// ==UserScript==
// @name         Draw Rectangle Example
// @version      1
// @description  Draw a rectangle on page
// @match        *://*/*
// @grant        GM_addStyle
// @grant        GM_drawRectangle
// ==/UserScript==

GM_addStyle(`
    .my-rect {
        position: absolute;
        top: 50px;
        left: 50px;
    }
`);

GM_drawRectangle(50, 50, 200, 100, 'red', '2px', '#ffbbbb');

这个示例会在页面的左上角绘制一个200x100的矩形，边框为红色、宽度为2px，背景色为粉红色。

注意事项

• drawRectangle()函数只能在Greasemonkey脚本中使用，在其他地方无效；
• 为了使用drawRectangle()函数，需要在脚本中声明@grant GM_drawRectangle 权限。
• 使用drawRectangle()绘制的矩形会浮在页面内容之上，不会影响页面中其他元素的布局和样式；
• 绘制一个矩形之后，如果需要对其进行移动、修改或删除等操作，可以使用DOM操作函数，如getElementById()、setAttribute()、removeChild()等。
• 如果需要同时绘制多个矩形，可以在脚本中多次调用drawRectangle()函数，每次传递不同的参数。
• 如果需要在页面上绘制其他形状，如线段、多边形等，可以参考其他绘图库或自行封装函数。