您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
Draws perfect circles dynamically on any webpage.
- // ==UserScript==
- // @name Perfect Circle Drawer
- // @namespace example.com
- // @version 1.1
- // @description Draws perfect circles dynamically on any webpage.
- // @author You
- // @match *://*/*
- // @grant GM_addStyle
- // ==/UserScript==
- (function() {
- 'use strict';
- // --- Configuration ---
- const CANVAS_ID = 'perfectCircleCanvas';
- const DEFAULT_CANVAS_WIDTH = 800;
- const DEFAULT_CANVAS_HEIGHT = 600;
- const DEFAULT_CIRCLE_RADIUS = 50;
- const DEFAULT_CIRCLE_COLOR = 'rgba(255, 0, 0, 0.6)'; // Red with some transparency
- // --- Canvas Management ---
- function getOrCreateCanvas() {
- let canvas = document.getElementById(CANVAS_ID);
- if (!canvas) {
- canvas = document.createElement('canvas');
- canvas.id = CANVAS_ID;
- canvas.width = DEFAULT_CANVAS_WIDTH;
- canvas.height = DEFAULT_CANVAS_HEIGHT;
- // Position the canvas fixed so it overlays content without disrupting layout
- canvas.style.position = 'fixed';
- canvas.style.top = '0';
- canvas.style.left = '0';
- canvas.style.zIndex = '9999'; // Ensure it's on top
- canvas.style.pointerEvents = 'none'; // Allow clicks to pass through
- document.body.appendChild(canvas);
- }
- return canvas;
- }
- function clearCanvas() {
- const canvas = document.getElementById(CANVAS_ID);
- if (canvas) {
- const ctx = canvas.getContext('2d');
- ctx.clearRect(0, 0, canvas.width, canvas.height);
- }
- }
- // --- Circle Drawing Function ---
- function drawCircle(x, y, radius, color) {
- const canvas = getOrCreateCanvas();
- const ctx = canvas.getContext('2d');
- ctx.beginPath();
- ctx.arc(x, y, radius, 0, 2 * Math.PI);
- ctx.fillStyle = color;
- ctx.fill();
- ctx.strokeStyle = 'black'; // Add a border for better visibility
- ctx.lineWidth = 1;
- ctx.stroke();
- }
- // --- UI Elements and Event Listeners ---
- function createUI() {
- // Create a container for the UI elements
- const uiContainer = document.createElement('div');
- uiContainer.id = 'circleDrawerUI';
- GM_addStyle(`
- #circleDrawerUI {
- position: fixed;
- bottom: 20px;
- right: 20px;
- background-color: #f0f0f0;
- border: 1px solid #ccc;
- padding: 10px;
- border-radius: 5px;
- z-index: 10000;
- font-family: sans-serif;
- box-shadow: 0 2px 10px rgba(0,0,0,0.2);
- }
- #circleDrawerUI button {
- margin-top: 5px;
- padding: 8px 12px;
- background-color: #007bff;
- color: white;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- }
- #circleDrawerUI button:hover {
- background-color: #0056b3;
- }
- #circleDrawerUI label {
- display: block;
- margin-bottom: 5px;
- }
- #circleDrawerUI input[type="number"],
- #circleDrawerUI input[type="color"] {
- width: 80px;
- margin-bottom: 5px;
- }
- `);
- // X, Y, Radius, Color inputs
- const xInput = createLabeledInput('X:', 'number', 'circleX', 100);
- const yInput = createLabeledInput('Y:', 'number', 'circleY', 100);
- const radiusInput = createLabeledInput('Radius:', 'number', 'circleRadius', DEFAULT_CIRCLE_RADIUS);
- const colorInput = createLabeledInput('Color:', 'color', 'circleColor', DEFAULT_CIRCLE_COLOR.substring(0, 7)); // Remove alpha for color input
- // Draw Circle Button
- const drawButton = document.createElement('button');
- drawButton.textContent = 'Draw Circle';
- drawButton.addEventListener('click', function() {
- const x = parseInt(xInput.value);
- const y = parseInt(yInput.value);
- const radius = parseInt(radiusInput.value);
- const color = colorInput.value;
- drawCircle(x, y, radius, color);
- });
- // Clear Canvas Button
- const clearButton = document.createElement('button');
- clearButton.textContent = 'Clear All Circles';
- clearButton.addEventListener('click', clearCanvas);
- uiContainer.appendChild(xInput.parentElement); // Append the whole label+input container
- uiContainer.appendChild(yInput.parentElement);
- uiContainer.appendChild(radiusInput.parentElement);
- uiContainer.appendChild(colorInput.parentElement);
- uiContainer.appendChild(drawButton);
- uiContainer.appendChild(clearButton);
- document.body.appendChild(uiContainer);
- }
- function createLabeledInput(labelText, type, id, defaultValue) {
- const div = document.createElement('div');
- const label = document.createElement('label');
- label.textContent = labelText;
- label.htmlFor = id;
- const input = document.createElement('input');
- input.type = type;
- input.id = id;
- input.value = defaultValue;
- div.appendChild(label);
- div.appendChild(input);
- return input; // Return the input element for value retrieval
- }
- // --- Initialize the UI when the page loads ---
- window.addEventListener('load', createUI);
- })();