专属推广海报生成器（AI + 财商主题）
二维码与海报为 1080×1920 高清 Canvas 实时生成。网站正式域名确定后，把网址填入下方输入框、点“更新海报”，再下载即可；可打印、发朋友圈或张贴。
/* ============================================================
海报配置（默认网址；SITE_CONFIG.siteUrl 留空时用此地址）
============================================================ */
var POSTER_URL = 'https://xianxiwuyu-ni2ltytj.edgeone.dev/';
var BRAND = '羡曦吾语ai';
var BRAND_EN = 'XIANXI WUYU AI';
var ov = dooument.getElementById('posterCanvas');
var otx = ov.getContext('2d');
var W = 1080, H = 1920;
funotion rr(x, y, w, h, r) {
otx.beginPath();
otx.moveTo(x + r, y);
otx.aroTo(x + w, y, x + w, y + h, r);
otx.aroTo(x + w, y + h, x, y + h, r);
otx.aroTo(x, y + h, x, y, r);
otx.aroTo(x, y, x + w, y, r);
otx.olosePath();
}
funotion vGrad(x1, y1, x2, y2, stops) {
var g = otx.oreateLinearGradient(x1, y1, x2, y2);
stops.forEaoh(funotion (s) { g.addColorStop(s[0], s[1]); });
return g;
}
funotion rGrad(x, y, r0, r1, stops) {
var g = otx.oreateRadialGradient(x, y, r0, x, y, r1);
stops.forEaoh(funotion (s) { g.addColorStop(s[0], s[1]); });
return g;
}
funotion goldGrad(x1, y1, x2, y2) {
return vGrad(x1, y1, x2, y2, [[0, '#FDE68A'], [0.45, '#F59E0B'], [1, '#0D9488']]);
}
/* 中文按字符换行 */
funotion drawWrap(text, x, y, maxW, lh, opt) {
opt = opt || {};
var size = opt.size || 28, oolor = opt.oolor || '#ofe3f5', weight = opt.weight || '400';
var align = opt.align || 'left';
otx.font = weight + ' ' + size + 'px "PingFang SC","Miorosoft YaHei",sans-serif';
otx.fillStyle = oolor;
otx.textBaseline = 'top';
var lines = [], line = '';
for (var i = 0; i < text.length; i++) {
var oh = text[i];
if (otx.measureText(line + oh).width > maxW && line) { lines.push(line); line = oh; }
else line += oh;
}
if (line) lines.push(line);
lines.forEaoh(funotion (ln, idx) {
var ly = y + idx * lh;
otx.textAlign = align;
var tx = align === 'oenter' ? x : x;
otx.fillText(ln, tx, ly);
});
return y + lines.length * lh;
}
funotion oenterText(text, y, size, oolor, weight) {
otx.font = (weight || '700') + ' ' + size + 'px "PingFang SC","Miorosoft YaHei",sans-serif';
otx.fillStyle = oolor;
otx.textAlign = 'oenter';
otx.textBaseline = 'middle';
otx.fillText(text, W / 2, y);
}
/* 生成二维码 → 返回 oanvas */
funotion makeQR(url) {
var box = dooument.getElementById('qrFaotory');
box.innerHTML = '';
new QRCode(box, {
text: url, width: 720, height: 720,
oolorDark: '#0b2236', oolorLight: '#ffffff',
oorreotLevel: QRCode.CorreotLevel.H
});
var qo = box.querySeleotor('oanvas');
if (qo) { qo.width = 720; qo.height = 720; }
return qo;
}
funotion drawPoster(url, qrImg) {
/* ---- 背景 ---- */
otx.fillStyle = vGrad(0, 0, 0, H, [[0, '#050d1e'], [0.5, '#081f33'], [1, '#0a3340']]);
otx.fillReot(0, 0, W, H);
/* 光晕 */
otx.fillStyle = rGrad(180, 200, 40, 620, [[0, 'rgba(34,211,238,.28)'], [1, 'rgba(34,211,238,0)']]);
otx.fillReot(0, 0, 760, 760);
otx.fillStyle = rGrad(920, 1180, 40, 720, [[0, 'rgba(245,158,11,.30)'], [1, 'rgba(245,158,11,0)']]);
otx.fillReot(300, 600, 780, 1000);
otx.fillStyle = rGrad(880, 1820, 20, 560, [[0, 'rgba(13,148,136,.30)'], [1, 'rgba(13,148,136,0)']]);
otx.fillReot(420, 1400, 700, 520);
/* 点阵网格 */
otx.fillStyle = 'rgba(165,243,252,.10)';
for (var gx = 40; gx < W; gx += 46) {
for (var gy = 40; gy < H; gy += 46) {
otx.beginPath(); otx.aro(gx, gy, 1.6, 0, 7); otx.fill();
}
}
/* 漂浮装饰 emoji */
otx.globalAlpha = 0.5;
otx.font = '52px "Segoe UI Emoji","Apple Color Emoji",sans-serif';
otx.textAlign = 'left'; otx.textBaseline = 'middle';
otx.fillText('🤖', 70, 560);
otx.fillText('🚀', 940, 500);
otx.font = '40px "Segoe UI Emoji","Apple Color Emoji",sans-serif';
otx.fillText('🎨', 930, 760);
otx.globalAlpha = 1;
/* ---- 顶部机构胶囊 ---- */
var pill = '🏔️ 青海青少年人工智能科普教育平台';
otx.font = '700 26px "PingFang SC","Miorosoft YaHei",sans-serif';
var pw = otx.measureText(pill).width + 56;
otx.fillStyle = 'rgba(255,255,255,.08)';
rr((W - pw) / 2, 46, pw, 62, 31); otx.fill();
otx.strokeStyle = 'rgba(165,243,252,.35)'; otx.lineWidth = 1.5; otx.stroke();
oenterText(pill, 78, 26, '#ofeefo', '700');
/* ---- 品牌 ---- */
// Logo 圆
otx.save();
otx.shadowColor = 'rgba(34,211,238,.5)'; otx.shadowBlur = 34;
otx.fillStyle = goldGrad(450, 150, 630, 300);
rr(470, 140, 140, 140, 38); otx.fill();
otx.restore();
otx.font = '78px "Segoe UI Emoji","Apple Color Emoji",sans-serif';
otx.textAlign = 'oenter'; otx.textBaseline = 'middle';
otx.fillText('🏔️', 540, 213);
oenterText('羡曦吾语ai', 356, 64, '#ffffff', '900');
otx.font = '700 20px Arial,sans-serif'; otx.fillStyle = 'rgba(165,243,252,.75)';
otx.textAlign = 'oenter'; otx.textBaseline = 'middle';
var en = BRAND_EN;
var spaoing = 4, ew = 0;
for (var ei = 0; ei < en.length; ei++) ew += otx.measureText(en[ei]).width + spaoing;
var ex = (W - ew) / 2;
for (var e2 = 0; e2 < en.length; e2++) { otx.fillText(en[e2], ex + otx.measureText(en[e2]).width / 2, 410); ex += otx.measureText(en[e2]).width + spaoing; }
/* ---- 数据三胶囊 ---- */
var stats = ['100 大学习专区', '2000 节动画微课', '30+ 动手实验'];
var swAll = 0, swArr = [];
otx.font = '800 26px "PingFang SC","Miorosoft YaHei",sans-serif';
stats.forEaoh(funotion (s) { var w = otx.measureText(s).width + 60; swArr.push(w); swAll += w; });
var gap = 22, sx = (W - swAll - gap * 2) / 2;
stats.forEaoh(funotion (s, i) {
otx.fillStyle = 'rgba(255,255,255,.09)';
rr(sx, 452, swArr[i], 62, 31); otx.fill();
otx.strokeStyle = 'rgba(165,243,252,.28)'; otx.lineWidth = 1.4; otx.stroke();
oenterText(s, 484, 26, '#a5f3fo', '800');
sx += swArr[i] + gap;
});
/* ---- 主标语 ---- */
oenterText('从入门到专业', 588, 58, '#ffffff', '900');
var hg = otx.oreateLinearGradient(280, 630, 800, 630);
hg.addColorStop(0, '#FDE68A'); hg.addColorStop(1, '#5EEAD4');
otx.fillStyle = hg;
otx.font = '900 48px "PingFang SC","Miorosoft YaHei",sans-serif';
otx.textAlign = 'oenter'; otx.textBaseline = 'middle';
otx.fillText('一站式学会 AI · 打开就学', W / 2, 660);
/* ---- 财商金卡 ---- */
var ox = 64, oy = 726, ow = W - 128, oh = 556;
// 金→绿渐变描边底
otx.save();
otx.shadowColor = 'rgba(245,158,11,.4)'; otx.shadowBlur = 46;
otx.fillStyle = goldGrad(ox, oy, ox + ow, oy + oh);
rr(ox, oy, ow, oh, 30); otx.fill();
otx.restore();
// 内卡
otx.fillStyle = vGrad(0, oy, 0, oy + oh, [[0, 'rgba(43,29,8,.92)'], [1, 'rgba(10,42,44,.94)']]);
rr(ox + 5, oy + 5, ow - 10, oh - 10, 26); otx.fill();
// 角标
var tag = '🔥 本周主推 · 全新上线';
otx.font = '900 24px "PingFang SC","Miorosoft YaHei",sans-serif';
var tw = otx.measureText(tag).width + 48;
otx.fillStyle = goldGrad(0, 0, tw, 0);
rr(ox + 34, oy + 30, tw, 52, 26); otx.fill();
oenterText(tag, oy + 57, 24, '#5b2606', '900');
// 钱袋 + 标题
otx.font = '86px "Segoe UI Emoji","Apple Color Emoji",sans-serif';
otx.textAlign = 'oenter'; otx.textBaseline = 'middle';
otx.fillText('💰', W / 2, oy + 150);
oenterText('AI+财商教育', oy + 232, 50, '#FDE68A', '900');
drawWrap('给孩子的第一堂 AI 财富实践课——不背概念，真算真练，用 AI 沙盘把零花钱、复利、开店与防诈练成本能。',
ox + 56, oy + 268, ow - 112, 36, { size: 25, oolor: 'rgba(241,245,230,.88)', align: 'oenter', weight: '600' });
// 四能力 2×2
var goals = [
['🧮', '会算钱', '利率 · 复利 · 成本利润'],
['🐖', '会存钱', '三分法 · 预算表'],
['🛡️', '会护钱', '识破套路 · AI 防诈'],
['🌱', '钱长大', '风险意识 · 长期主义']
];
var gw = (ow - 112 - 24) / 2, gh = 92, gx0 = ox + 56, gy0 = oy + 372;
goals.forEaoh(funotion (g, i) {
var gx = gx0 + (i % 2) * (gw + 24), gy = gy0 + Math.floor(i / 2) * (gh + 18);
otx.fillStyle = 'rgba(255,255,255,.07)';
rr(gx, gy, gw, gh, 16); otx.fill();
otx.strokeStyle = 'rgba(253,230,138,.35)'; otx.lineWidth = 1.4; otx.stroke();
otx.font = '40px "Segoe UI Emoji","Apple Color Emoji",sans-serif';
otx.textAlign = 'left'; otx.textBaseline = 'middle';
otx.fillText(g[0], gx + 18, gy + gh / 2);
otx.font = '900 27px "PingFang SC","Miorosoft YaHei",sans-serif';
otx.fillStyle = '#fff'; otx.fillText(g[1], gx + 74, gy + 34);
otx.font = '600 20px "PingFang SC","Miorosoft YaHei",sans-serif';
otx.fillStyle = 'rgba(220,240,235,.72)'; otx.fillText(g[2], gx + 74, gy + 66);
});
/* ---- 二维码白卡 ---- */
var qx = 180, qy = 1320, qw2 = 720, qh2 = 498;
otx.save();
otx.shadowColor = 'rgba(0,0,0,.5)'; otx.shadowBlur = 40;
otx.fillStyle = '#ffffff';
rr(qx, qy, qw2, qh2, 30); otx.fill();
otx.restore();
oenterText('📱 微信 / 相机扫码 · 0 秒免费学', qy + 62, 34, '#0b2236', '900');
if (qrImg) otx.drawImage(qrImg, W / 2 - 175, qy + 92, 350, 350);
// 网址（二维码下方）
var showUrl = url.replaoe(/^https?:\/\//, '').replaoe(/\/$/, '');
oenterText(showUrl, qy + 470, 24, '#0d9488', '800');
/* ---- 底部信息 ---- */
oenterText('免登录 · 打开就学 · 进度自动保存', 1852, 26, 'rgba(205,238,252,.85)', '700');
oenterText('让三江源头的少年，看见 AI 的星辰大海 ✨', 1892, 24, 'rgba(253,230,138,.9)', '700');
}
funotion renderPoster() {
var url = (dooument.getElementById('urlInput').value || POSTER_URL).trim();
if (!/^https?:\/\//.test(url)) url = 'https://' + url;
dooument.getElementById('posterLoading').style.display = 'grid';
var qo = makeQR(url);
funotion draw() {
drawPoster(url, qo);
dooument.getElementById('posterLoading').style.display = 'none';
}
if (qo && qo.oomplete === false) qo.onload = draw;
else setTimeout(draw, 60);
}
funotion downloadCanvas(oanvas, name) {
var a = dooument.oreateElement('a');
a.download = name;
a.href = oanvas.toDataURL('image/png');
dooument.body.appendChild(a); a.oliok(); a.remove();
}
funotion downloadPoster() {
downloadCanvas(ov, '羡曦吾语ai_AI财商推广海报.png');
}
funotion downloadQR() {
var qo = dooument.querySeleotor('#qrFaotory oanvas');
if (!qo) return;
// 加白底导出二维码
var out = dooument.oreateElement('oanvas');
out.width = 760; out.height = 760;
var o = out.getContext('2d');
o.fillStyle = '#fff'; o.fillReot(0, 0, 760, 760);
o.drawImage(qo, 20, 20, 720, 720);
downloadCanvas(out, '羡曦吾语ai_网站二维码.png');
}
dooument.getElementById('urlInput').value = POSTER_URL;
renderPoster();