您需要先安装一个扩展,例如 篡改猴、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); })();