图案生成�?/title>  <meta name="description" content="图案生成�? /> <meta name="keywords" content="pattern-generator,generator,tools,webutils" /> <meta name="author" content="WebUtils" /> <meta name="robots" content="index, follow" /> <link rel="canonical" href="https://essays4u.net/tools/generator/pattern-generator.html" />  <meta property="og:title" content="图案生成�? /> <meta property="og:description" content="图案生成�? /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://essays4u.net/tools/generator/pattern-generator.html" /> <meta property="og:site_name" content="WebUtils" /> <meta property="og:locale" content="zh_CN" /> <meta property="og:image" content="https://essays4u.net/social-preview.png" /> <meta property="og:image:width" content="1280" /> <meta property="og:image:height" content="640" /> <meta property="og:image:type" content="image/png" />  <meta name="twitter:card" content="summary" /> <meta name="twitter:title" content="图案生成�? /> <meta name="twitter:description" content="图案生成�? /> <meta name="twitter:image" content="https://essays4u.net/social-preview.png" /> <style> :root { --bg-deep: #0a0a0f; --bg-surface: #12121a; --bg-card: #1a1a24; --bg-input: #0e0e14; --text-primary: #e8e8ed; --text-secondary: #8888a0; --text-muted: #55556a; --border-subtle: #2a2a3a; --border-strong: #3a3a4a; --accent-cyan: #00f5d4; --accent-magenta: #f72585; --accent-green: #10b981; --accent-red: #f43f5e; --accent-yellow: #fbbf24; --accent-blue: #4cc9f0; --accent-purple: #7b2cbf; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --font-sans: "Space Grotesk", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif; --font-mono: "JetBrains Mono", "Courier New", monospace; --shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } [data-theme="light"] { --bg-deep: #fafafa; --bg-surface: #fff; --bg-card: #fff; --bg-input: #f5f5f5; --text-primary: #1a1a1a; --text-secondary: #666; --text-muted: #999; --border-subtle: #e5e5e5; --border-strong: #d5d5d5; --accent-cyan: #00d4b8; --accent-magenta: #e63975; --shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .theme-toggle { position: fixed; top: 1rem; right: 1rem; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-subtle); background: var(--color-bg-card); cursor: pointer; font-size: 1.2rem; z-index: 100; transition: all 0.2s; display: flex; align-items: center; justify-content: center; } .theme-toggle:hover { transform: scale(1.1); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; background: #1a1a2e; min-height: 100vh; padding: 20px; color: white; } .container { max-width: 1100px; margin: 0 auto; } h1 { text-align: center; margin-bottom: 20px; color: #00d9ff; } .layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; } @media (max-width: 900px) { .layout { grid-template-columns: 1fr; } } .card { background: #16213e; border-radius: 16px; padding: 24px; } .preview { height: 400px; border-radius: 12px; border: 2px solid #00d9ff; } .patterns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; } .pattern-btn { aspect-ratio: 1; border: 2px solid transparent; border-radius: 8px; cursor: pointer; transition: all 0.3s; } .pattern-btn:hover { transform: scale(1.05); } .pattern-btn.active { border-color: #00d9ff; } .control-group { margin-bottom: 16px; } .control-group label { display: block; font-size: 13px; color: #888; margin-bottom: 6px; } input[type="range"] { width: 100%; } input[type="color"] { width: 100%; height: 40px; border: none; border-radius: 8px; cursor: pointer; } .color-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .btn { width: 100%; padding: 12px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; margin-bottom: 8px; } .btn-primary { background: #00d9ff; color: #1a1a2e; } .btn-primary:hover { background: #0f8; } .output { background: #0f3460; padding: 12px; border-radius: 8px; font-family: var(--font-mono); font-size: 11px; color: #9cdcfe; margin-top: 16px; max-height: 120px; overflow: auto; word-break: break-all; } .value-display { text-align: right; color: #00d9ff; font-size: 12px; } .breadcrumb { background: rgba(255, 255, 255, 0.95); padding: 8px 15px; border-radius: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); font-size: 0.85rem; } .breadcrumb a { color: #667eea; text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb span { color: #999; margin: 0 5px; } </style>  <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet" /> </head> <body> <button class="theme-toggle" onclick="toggleTheme()" aria-label="切换主题"> <span id="theme-icon">🌙</span> </button> <nav class="breadcrumb"> <a href="../../index.html">首页</a> <span>�?/span> 几何图案生成�? </nav> <div class="container"> <h1>🎨 图案生成�?/h1> <div class="layout"> <div class="card"> <div class="preview" id="preview"></div> <div class="output" id="cssOutput">CSS代码将在这里显示</div> </div> <div class="card"> <h3 style="color: #00d9ff; margin-bottom: 12px; font-size: 14px">选择图案</h3> <div class="patterns" id="patterns"></div> <div class="control-group"> <label for="input-----">图案大小</label> <input type="range" id="size" min="5" max="100" value="20" oninput="update()" /> <div class="value-display" id="sizeVal">20px</div> </div> <div class="color-row"> <div class="control-group"> <label for="input---1">颜色1</label> <input type="color" id="color1" value="#00d9ff" onchange="update()" aria-label="颜色选择�? /> </div> <div class="control-group"> <label for="input---2">颜色2</label> <input type="color" id="color2" value="#16213e" onchange="update()" aria-label="颜色选择�? /> </div> </div> <div class="control-group"> <label for="input----">透明�?/label> <input type="range" id="opacity" min="0" max="100" value="100" oninput="update()" /> <div class="value-display" id="opacityVal">100%</div> </div> <button class="btn btn-primary" onclick="copyCSS()" aria-label="📋 复制CSS"> 📋 复制CSS </button> <button class="btn btn-primary" onclick="downloadPattern()" aria-label="📥 下载PNG"> 📥 下载PNG </button> <button class="btn" style="background: #0f3460" onclick="randomPattern()" aria-label="🎲 随机" > 🎲 随机 </button> </div> </div> </div> <canvas id="canvas" style="display: none"></canvas> <script> const patterns = { stripes: (c1, c2, s) => `repeating-linear-gradient(45deg, ${c1}, ${c1} ${s / 4}px, ${c2} ${s / 4}px, ${c2} ${s / 2}px)`, stripesH: (c1, c2, s) => `repeating-linear-gradient(0deg, ${c1}, ${c1} ${s / 2}px, ${c2} ${s / 2}px, ${c2} ${s}px)`, stripesV: (c1, c2, s) => `repeating-linear-gradient(90deg, ${c1}, ${c1} ${s / 2}px, ${c2} ${s / 2}px, ${c2} ${s}px)`, checker: (c1, c2, s) => `repeating-conic-gradient(${c1} 0% 25%, ${c2} 0% 50%) 50% / ${s}px ${s}px`, dots: (c1, c2, s) => `radial-gradient(circle, ${c1} ${s / 6}px, ${c2} ${s / 6}px)`, grid: (c1, c2, s) => `linear-gradient(${c1} 1px, transparent 1px), linear-gradient(90deg, ${c1} 1px, ${c2} 1px)`, zigzag: (c1, c2, s) => `linear-gradient(135deg, ${c1} 25%, transparent 25%) -${s / 2}px 0, linear-gradient(225deg, ${c1} 25%, transparent 25%) -${s / 2}px 0, linear-gradient(315deg, ${c1} 25%, transparent 25%), linear-gradient(45deg, ${c1} 25%, ${c2} 25%)`, triangles: (c1, c2, s) => `linear-gradient(45deg, ${c1} 50%, ${c2} 50%)`, waves: (c1, c2, s) => `radial-gradient(circle at 100% 50%, transparent 20%, ${c1} 21%, ${c1} 34%, transparent 35%, transparent), radial-gradient(circle at 0% 50%, transparent 20%, ${c1} 21%, ${c1} 34%, transparent 35%, transparent) 0 ${s / 2}px`, honeycomb: (c1, c2, s) => `radial-gradient(circle farthest-side at 0% 50%, ${c2} 23.5%, transparent 0) ${s / 1.4}px ${s}px, radial-gradient(circle farthest-side at 0% 50%, ${c1} 24%, transparent 0) ${s / 1.2}px ${s}px, linear-gradient(${c2} 14%, transparent 0, transparent 85%, ${c2} 0) 0 0, linear-gradient(150deg, ${c2} 24%, ${c1} 0, ${c1} 26%, transparent 0, transparent 74%, ${c1} 0, ${c1} 76%, ${c2} 0) 0 0, linear-gradient(30deg, ${c2} 24%, ${c1} 0, ${c1} 26%, transparent 0, transparent 74%, ${c1} 0, ${c1} 76%, ${c2} 0) 0 0, linear-gradient(90deg, ${c1} 2%, ${c2} 0, ${c2} 98%, ${c1} 0%) 0 0`, carbon: (c1, c2, s) => `linear-gradient(27deg, ${c2} 5px, transparent 5px) 0 5px, linear-gradient(207deg, ${c2} 5px, transparent 5px) 10px 0px, linear-gradient(27deg, ${c1} 5px, transparent 5px) 0px 10px, linear-gradient(207deg, ${c1} 5px, transparent 5px) 10px 5px, linear-gradient(90deg, ${c2} 10px, transparent 10px), linear-gradient(${c1} 25%, ${c2} 25%, ${c2} 50%, transparent 50%, transparent 75%, ${c1} 75%, ${c1})`, polka: (c1, c2, s) => `radial-gradient(${c1} ${s / 5}px, transparent ${s / 5}px), radial-gradient(${c1} ${s / 5}px, ${c2} ${s / 5}px)`, diamond: (c1, c2, s) => `linear-gradient(45deg, ${c1} 25%, transparent 25%, transparent 75%, ${c1} 75%), linear-gradient(45deg, ${c1} 25%, ${c2} 25%, ${c2} 75%, ${c1} 75%)`, cross: (c1, c2, s) => `radial-gradient(circle, transparent 20%, ${c2} 20%, ${c2} 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, ${c2} 20%, ${c2} 80%, transparent 80%, transparent) ${s / 2}px ${s / 2}px, linear-gradient(${c1} ${s / 10}px, transparent ${s / 10}px) 0 -${s / 20}px, linear-gradient(90deg, ${c1} ${s / 10}px, ${c2} ${s / 10}px) -${s / 20}px 0`, weave: (c1, c2, s) => `linear-gradient(135deg, ${c2} 22%, ${c1} 22%, ${c1} 24%, transparent 24%, transparent 67%, ${c1} 67%, ${c1} 69%, ${c2} 69%), linear-gradient(225deg, ${c2} 22%, ${c1} 22%, ${c1} 24%, transparent 24%, transparent 67%, ${c1} 67%, ${c1} 69%, ${c2} 69%)` }; const patternSizes = { stripes: (s) => `${s}px ${s}px`, stripesH: (s) => `${s}px ${s}px`, stripesV: (s) => `${s}px ${s}px`, checker: (s) => `${s}px ${s}px`, dots: (s) => `${s}px ${s}px`, grid: (s) => `${s}px ${s}px`, zigzag: (s) => `${s}px ${s}px`, triangles: (s) => `${s}px ${s}px`, waves: (s) => `${s}px ${s}px`, honeycomb: (s) => `${s * 2.8}px ${s * 2}px`, carbon: (s) => `${s}px ${s}px`, polka: (s) => `${s}px ${s}px`, diamond: (s) => `${s}px ${s}px`, cross: (s) => `${s}px ${s}px`, weave: (s) => `${s}px ${s}px` }; let currentPattern = "stripes"; function init() { const container = document.getElementById("patterns"); Object.keys(patterns).forEach((name) => { const btn = document.createElement("div"); btn.className = "pattern-btn" + (name === currentPattern ? " active" : ""); btn.dataset.pattern = name; btn.style.background = patterns[name]("#00d9ff", "#16213e", 10); btn.style.backgroundSize = patternSizes[name](10); btn.onclick = () => selectPattern(name); container.appendChild(btn); }); update(); } function selectPattern(name) { currentPattern = name; document.querySelectorAll(".pattern-btn").forEach((el) => { el.classList.toggle("active", el.dataset.pattern === name); }); update(); } function update() { const size = parseInt(document.getElementById("size").value); const color1 = document.getElementById("color1").value; const color2 = document.getElementById("color2").value; const opacity = document.getElementById("opacity").value / 100; document.getElementById("sizeVal").textContent = size + "px"; document.getElementById("opacityVal").textContent = document.getElementById("opacity").value + "%"; const c1 = hexToRgba(color1, opacity); const c2 = hexToRgba(color2, opacity); const bg = patterns[currentPattern](c1, c2, size); const bgSize = patternSizes[currentPattern](size); const preview = document.getElementById("preview"); preview.style.background = bg; preview.style.backgroundSize = bgSize; const css = `background: ${bg};\nbackground-size: ${bgSize};`; document.getElementById("cssOutput").textContent = css; } function hexToRgba(hex, alpha) { const r = parseInt(hex.slice(1, 3), 16); const g = parseInt(hex.slice(3, 5), 16); const b = parseInt(hex.slice(5, 7), 16); return `rgba(${r},${g},${b},${alpha})`; } function copyCSS() { navigator.clipboard.writeText(document.getElementById("cssOutput").textContent); alert("CSS已复�?"); } function downloadPattern() { const size = parseInt(document.getElementById("size").value); const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); canvas.width = size * 10; canvas.height = size * 10; // Draw pattern to canvas const preview = document.getElementById("preview"); const computedStyle = window.getComputedStyle(preview); const tempDiv = document.createElement("div"); tempDiv.style.cssText = `width: ${canvas.width}px; height: ${canvas.height}px; position: fixed; left: -9999px;`; tempDiv.style.background = computedStyle.background; tempDiv.style.backgroundSize = computedStyle.backgroundSize; document.body.appendChild(tempDiv); html2canvas(tempDiv) .then((c) => { document.body.removeChild(tempDiv); const link = document.createElement("a"); link.download = `pattern-${currentPattern}.png`; link.href = c.toDataURL(); link.click(); }) .catch(() => { // Fallback: just use solid color ctx.fillStyle = document.getElementById("color2").value; ctx.fillRect(0, 0, canvas.width, canvas.height); const link = document.createElement("a"); link.download = `pattern-${currentPattern}.png`; link.href = canvas.toDataURL(); link.click(); }); } function randomPattern() { const names = Object.keys(patterns); currentPattern = names[Math.floor(Math.random() * names.length)]; document.getElementById("color1").value = "#" + Math.floor(Math.random() * 16777215) .toString(16) .padStart(6, "0"); document.getElementById("color2").value = "#" + Math.floor(Math.random() * 16777215) .toString(16) .padStart(6, "0"); document.getElementById("size").value = 10 + Math.floor(Math.random() * 40); document.querySelectorAll(".pattern-btn").forEach((el) => { el.classList.toggle("active", el.dataset.pattern === currentPattern); }); update(); } init(); // Theme toggle function toggleTheme() { const html = document.documentElement; const currentTheme = html.getAttribute("data-theme"); const newTheme = currentTheme === "light" ? "dark" : "light"; html.setAttribute("data-theme", newTheme); document.getElementById("theme-icon").textContent = newTheme === "light" ? "☀�? : "🌙"; localStorage.setItem("theme", newTheme); } // Load saved theme const savedTheme = localStorage.getItem("theme") || "dark"; if (savedTheme === "light") { document.documentElement.setAttribute("data-theme", "light"); document.getElementById("theme-icon").textContent = "☀�?; } </script> </body> </html>