神话勇士海报生成器（原创风格）

神话风格海报生成器（原创）

第一行（数字）第二行（文字）

提示：此为原创神话风格角色，非任何电影/版权角色。如需风格微调（配色、发型、构图），可告诉我具体要求。

:root { --bg: #0b1020; --accent: #ff6b1a; --muted: #f2f2f2; } * { box-sizing: border-box; font-family: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", sans-serif; } body { margin: 0; padding: 24px; background: linear-gradient(180deg, #071026 0%, #0b1020 100%); color: var(--muted); min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; } .container { width: 760px; max-width: 94%; } h1 { margin: 0 0 12px 0; font-size: 18px; color: #fff; } .controls { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; } label { display: flex; flex-direction: column; font-size: 13px; color: #dfe7ef; } input { margin-top: 6px; padding: 8px 10px; border-radius: 6px; border: none; outline: none; width: 320px; max-width: 42vw; font-size: 14px; } .buttons { display: flex; gap: 8px; align-items: center; } button { padding: 10px 14px; border: none; border-radius: 8px; cursor: pointer; background: linear-gradient(90deg, var(--accent), #ff9b3a); color: #fff; font-weight: 600; } .canvas-wrap { margin-top: 14px; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6); width: 100%; max-width: 420px; } canvas { display: block; width: 100%; height: auto; } .note { margin-top: 10px; font-size: 13px; color: #9fb2c8; } @media (max-width: 640px) { .controls { flex-direction: column; align-items: stretch; } input { width: 100%; } .canvas-wrap { max-width: 100%; } } const canvas = document.getElementById("poster"); const ctx = canvas.getContext("2d", { alpha: false }); // Set high-DPI for crisp rendering function setCanvasSize(w, h) { const dpr = Math.max(1, window.devicePixelRatio || 1); canvas.style.width = w + "px"; canvas.style.height = h + "px"; canvas.width = Math.floor(w * dpr); canvas.height = Math.floor(h * dpr); ctx.setTransform(dpr, 0, 0, dpr, 0, 0); } // Draw background gradient and subtle texture function drawBackground(w, h) { const g = ctx.createLinearGradient(0, 0, 0, h); g.addColorStop(0, "#0b1630"); g.addColorStop(0.45, "#10283f"); g.addColorStop(1, "#071026"); ctx.fillStyle = g; ctx.fillRect(0, 0, w, h); // subtle radial glow center const rg = ctx.createRadialGradient(w / 2, h * 0.45, 40, w / 2, h * 0.45, Math.max(w, h)); rg.addColorStop(0, "rgba(255,120,40,0.12)"); rg.addColorStop(1, "rgba(2,6,12,0)"); ctx.fillStyle = rg; ctx.fillRect(0, 0, w, h); } // Draw a stylized original mythical child-warrior (avoid any copyrighted look) function drawCharacter(w, h) { const cx = w / 2; const cy = h * 0.55; // shadow under character ctx.fillStyle = "rgba(0,0,0,0.45)"; ctx.beginPath(); ctx.ellipse(cx, cy + 220, 220, 40, 0, 0, Math.PI * 2); ctx.fill(); // robe (simple shape) ctx.fillStyle = "#b93b0f"; ctx.beginPath(); ctx.moveTo(cx - 120, cy + 40); ctx.quadraticCurveTo(cx, cy + 360, cx + 120, cy + 40); ctx.lineTo(cx + 90, cy + 160); ctx.quadraticCurveTo(cx, cy + 220, cx - 90, cy + 160); ctx.closePath(); ctx.fill(); // belt ctx.fillStyle = "#ffcf8b"; ctx.fillRect(cx - 70, cy + 80, 140, 22); ctx.strokeStyle = "rgba(0,0,0,0.18)"; ctx.strokeRect(cx - 70, cy + 80, 140, 22); // arms ctx.fillStyle = "#ffb07a"; ctx.beginPath(); ctx.ellipse(cx - 100, cy + 20, 28, 40, -0.3, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(cx + 100, cy + 20, 28, 40, 0.3, 0, Math.PI * 2); ctx.fill(); // head ctx.beginPath(); const headR = 70; ctx.fillStyle = "#ffd9b8"; ctx.arc(cx, cy - 70, headR, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = "rgba(0,0,0,0.06)"; ctx.stroke(); // hair-topknot as flame-like shape (stylized) const flameGrad = ctx.createLinearGradient(cx, cy - 170, cx, cy - 20); flameGrad.addColorStop(0, "#ffd54a"); flameGrad.addColorStop(0.4, "#ff6b1a"); flameGrad.addColorStop(1, "#ff1a1a"); ctx.fillStyle = flameGrad; ctx.beginPath(); ctx.moveTo(cx, cy - 170); ctx.quadraticCurveTo(cx + 36, cy - 130, cx + 12, cy - 90); ctx.quadraticCurveTo(cx + 36, cy - 70, cx + 10, cy - 50); ctx.quadraticCurveTo(cx, cy - 20, cx - 28, cy - 70); ctx.quadraticCurveTo(cx - 56, cy - 120, cx, cy - 170); ctx.closePath(); ctx.fill(); // face details // eyes ctx.fillStyle = "#2b2b2b"; ctx.beginPath(); ctx.ellipse(cx - 24, cy - 75, 9, 6, 0, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.ellipse(cx + 24, cy - 75, 9, 6, 0, 0, Math.PI * 2); ctx.fill(); // eyebrows ctx.strokeStyle = "#3b2b2b"; ctx.lineWidth = 4; ctx.beginPath(); ctx.moveTo(cx - 38, cy - 95); ctx.quadraticCurveTo(cx - 24, cy - 102, cx - 8, cy - 95); ctx.stroke(); ctx.beginPath(); ctx.moveTo(cx + 8, cy - 95); ctx.quadraticCurveTo(cx + 24, cy - 102, cx + 40, cy - 95); ctx.stroke(); // freckles / cheek mark (stylized) ctx.fillStyle = "rgba(255,80,30,0.85)"; ctx.beginPath(); ctx.arc(cx - 40, cy - 60, 6, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(cx + 40, cy - 60, 6, 0, Math.PI * 2); ctx.fill(); // staff on right side (vertical) ctx.save(); ctx.translate(cx + 150, cy + 20); ctx.rotate(-0.2); ctx.fillStyle = "#8b5a2b"; ctx.fillRect(-8, -220, 16, 480); // staff ring near top ctx.strokeStyle = "#ffd86b"; ctx.lineWidth = 6; ctx.beginPath(); ctx.arc(0, -160, 28, 0, Math.PI * 2); ctx.stroke(); ctx.restore(); // decorative orb in front (glow) const orbX = cx; const orbY = cy + 10; const orbGrad = ctx.createRadialGradient(orbX, orbY, 4, orbX, orbY, 80); orbGrad.addColorStop(0, "rgba(255,220,140,0.95)"); orbGrad.addColorStop(0.5, "rgba(255,120,40,0.5)"); orbGrad.addColorStop(1, "rgba(255,40,0,0)"); ctx.fillStyle = orbGrad; ctx.beginPath(); ctx.arc(orbX, orbY, 80, 0, Math.PI * 2); ctx.fill(); } // Draw centered text with automatic scaling to maximize width (extend to edges) function drawCenteredText(line1, line2, w, h) { // desired max width per line (allow small margin) const margin = 24; const maxW = w - margin * 2; ctx.textAlign = "center"; ctx.textBaseline = "middle"; // helper to compute best font size to fill width function fitFont(text, baseFont, targetWidth, maxFontSize, minFontSize) { let fontSize = maxFontSize; while (fontSize > minFontSize) { ctx.font = `${fontSize}px ${baseFont}`; const metrics = ctx.measureText(text); if (metrics.width <= targetWidth) break; fontSize -= 2; } if (fontSize < minFontSize) fontSize = minFontSize; return fontSize; } // Use wider font for digits and bold for visibility const fontBase = "Noto Sans SC, PingFang SC, sans-serif"; // First line: typically digits, make large const maxFont1 = Math.floor(h * 0.12); const font1 = fitFont(line1, fontBase, maxW, maxFont1, 36); // Second line: text can be longer; allow wrapping-like fit by reducing font const maxFont2 = Math.floor(h * 0.08); const font2 = fitFont(line2, fontBase, maxW, maxFont2, 22); // draw shadowed stroke for clarity ctx.lineWidth = Math.max(6, Math.floor(font1 / 12)); ctx.strokeStyle = "rgba(0,0,0,0.6)"; ctx.fillStyle = "#ffffff"; // Position lines a bit above center const centerY = h * 0.26; // First line ctx.font = `700 ${font1}px ${fontBase}`; ctx.strokeText(line1, w / 2, centerY); ctx.fillText(line1, w / 2, centerY); // Second line - slightly lower ctx.lineWidth = Math.max(4, Math.floor(font2 / 14)); ctx.strokeStyle = "rgba(0,0,0,0.55)"; ctx.font = `600 ${font2}px ${fontBase}`; ctx.strokeText(line2, w / 2, centerY + font1 * 0.95); ctx.fillText(line2, w / 2, centerY + font1 * 0.95); } function generatePoster(line1, line2) { const w = 1080; const h = 1920; setCanvasSize(w, h); drawBackground(w, h); drawCharacter(w, h); drawCenteredText(line1, line2, w, h); // small branding or subtle bottom text (optional) ctx.fillStyle = "rgba(255,255,255,0.08)"; ctx.font = "12px sans-serif"; ctx.textAlign = "left"; ctx.fillText("Generated by 神话海报生成器", 18, h - 18); } // UI hooks document.getElementById("generate").addEventListener("click", () => { const l1 = document.getElementById("line1").value || ""; const l2 = document.getElementById("line2").value || ""; generatePoster(l1, l2); }); document.getElementById("download").addEventListener("click", () => { const link = document.createElement("a"); link.download = "poster.png"; link.href = canvas.toDataURL("image/png"); link.click(); }); // Auto-generate on load with provided defaults window.addEventListener("load", () => { const l1 = document.getElementById("line1").value; const l2 = document.getElementById("line2").value; generatePoster(l1, l2); }); 抱歉，我不能直接生成或编辑受版权保护角色（例如电影中的“哪吒”）的图片。但我已为你准备了一个可运行页面：生成一张采用中国神话风格的原创角色海报，并把你提供的文字（第一行：289326669；第二行：今日头条极速版邀请码）清晰地置于中间并尽量延伸到图片边缘。你可以打开 index.html，点击“生成海报”并下载 PNG。如需更贴近哪吒的风格（配色、发型、配饰方向），我可以在不使用版权角色的前提下进一步调整。要我做哪些具体修改？