节点 | GM drawPolyline()函数

简介

在Tampermonkey/Greasemonkey脚本中，可以使用GM drawPolyline()函数来绘制折线图。它可以在网页上画出多段相连的直线，用以表示某些数据的变化趋势。

语法

GM.drawPolyline(params);

参数说明

• params：必选参数，折线图绘制参数对象，包含以下属性：
  • coordinatesArray：必选属性，数组，表示每个坐标点的横纵坐标数组。例如[ [x1, y1], [x2, y2], ...]。
  • color：可选属性，字符串，表示折线的颜色，可以是十六进制颜色码（例如"#FF0000"），也可以是颜色名称（例如"red"）。
  • lineWeight：可选属性，数字，表示折线的粗细程度，单位为像素，默认值为1。
  • lineStyle：可选属性，字符串，表示折线的样式，可以是"solid"、"dashed"或"double"。默认值为"solid"。
  • fillOpacity：可选属性，数字，表示填充颜色的透明程度，取值为0到1之间的浮点数。默认值为0，表示不填充颜色。
  • fillColor：可选属性，字符串，表示填充颜色，可以是十六进制颜色码或颜色名称。默认值为"none"，表示不填充颜色。

示例

使用GM drawPolyline()函数绘制一条红色折线：

// ==UserScript==
// @name         drawPolyline示例 - 示例1
// @namespace    http://localhost/
// @version      1
// @description  drawPolyline实例 - 示例1：绘制一条红色折线
// @match        http://*/*
// @match        https://*/*
// @grant        GM_addStyle
// @grant        GM_drawPolyline
// ==/UserScript==

(function() {
    'use strict';
    GM_addStyle("canvas {position: absolute; top: 0; left: 0;}");
    var canvas = document.createElement('canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    document.body.appendChild(canvas);
    var context = canvas.getContext('2d');
    GM_drawPolyline({
        coordinatesArray: [[50, 50], [100, 200], [200, 300], [400, 500]],
        color: 'red',
        lineWeight: 2
    });
})();

该示例的代码逻辑如下：

• 引入GM_addStyle和GM_drawPolyline函数。
• 创建canvas元素，并将其添加到body标签中，使之全屏覆盖。
• 获取canvas的2D绘图上下文对象。
• 使用GM_drawPolyline函数绘制折线，折线的连续四个点的坐标分别为(50, 50)、(100, 200)、(200, 300)、(400, 500)，折线的颜色为红色，粗细为2像素。

在浏览器中打开任意网页，在控制台中运行该脚本，会在网页上绘制一条红色的折线。

注意事项

1. 使用GM drawPolyline()函数之前，需要先引入GM_drawPolyline。

// ==UserScript==
// @grant        GM_drawPolyline
// ==/UserScript==

2. 为了让折线图覆盖全屏，需要引入GM_addStyle并使用如下CSS样式设置canvas元素。

GM_addStyle("canvas {position: absolute; top: 0; left: 0;}");