컨트롤넷

<div class="wrap">
  <canvas id="cv"></canvas>
  <span class="tag left">컨트롤 맵 (포즈 스켈레톤)</span>
  <span class="tag right" id="rtag">생성 결과: 스타일 A</span>
</div>

.wrap{position:relative;width:100%;height:100%}
#cv{position:absolute;inset:0;width:100%;height:100%}
.tag{position:absolute;top:8px;z-index:2;font-size:9.5px;font-weight:700;color:#f1f0ec;
  padding:4px 8px;border-radius:8px;background:rgba(13,13,18,0.55);border:1px solid rgba(255,255,255,0.15)}
.left{left:8px}
.right{right:8px}

const cv = document.getElementById('cv'), ctx = cv.getContext('2d');
const rtag = document.getElementById('rtag');
function fit() { const dpr = Math.min(devicePixelRatio || 1, 2); cv.width = innerWidth * dpr; cv.height = innerHeight * dpr; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); }
addEventListener('resize', fit); fit();

const joints = { head: [0.5, 0.18], neck: [0.5, 0.32], lsh: [0.36, 0.35], rsh: [0.64, 0.35], lel: [0.28, 0.5], rel: [0.72, 0.5], lhip: [0.42, 0.58], rhip: [0.58, 0.58], lknee: [0.4, 0.76], rknee: [0.6, 0.76], lft: [0.38, 0.94], rft: [0.62, 0.94] };
const bones = [['head', 'neck'], ['neck', 'lsh'], ['neck', 'rsh'], ['lsh', 'lel'], ['rsh', 'rel'], ['neck', 'lhip'], ['neck', 'rhip'], ['lhip', 'rhip'], ['lhip', 'lknee'], ['rhip', 'rknee'], ['lknee', 'lft'], ['rknee', 'rft']];

function drawSkeleton(offsetX, halfW, h, opts) {
  ctx.lineWidth = opts.lw; ctx.lineCap = 'round'; ctx.strokeStyle = opts.stroke;
  if (opts.glow) { ctx.shadowColor = opts.stroke; ctx.shadowBlur = opts.glow; }
  for (const [a, b] of bones) {
    const ja = joints[a], jb = joints[b];
    ctx.beginPath(); ctx.moveTo(offsetX + ja[0] * halfW, ja[1] * h); ctx.lineTo(offsetX + jb[0] * halfW, jb[1] * h); ctx.stroke();
  }
  ctx.shadowBlur = 0;
  ctx.fillStyle = opts.dotColor;
  for (const k in joints) { const j = joints[k]; ctx.beginPath(); ctx.arc(offsetX + j[0] * halfW, j[1] * h, opts.dot, 0, Math.PI * 2); ctx.fill(); }
}
const themes = [
  { name: '스타일 A', stroke: 'hsl(320 80% 62%)', lw: 7, dot: 5, dotColor: 'hsl(320 90% 78%)', glow: 10 },
  { name: '스타일 B', stroke: 'hsl(160 70% 52%)', lw: 7, dot: 5, dotColor: 'hsl(160 80% 74%)', glow: 10 },
  { name: '스타일 C', stroke: 'hsl(42 90% 55%)', lw: 7, dot: 5, dotColor: 'hsl(42 95% 74%)', glow: 10 },
];
let ti = 0;
function render() {
  const w = innerWidth, h = innerHeight;
  ctx.clearRect(0, 0, w, h);
  drawSkeleton(0, w * 0.5, h, { lw: 2.5, stroke: 'rgba(255,255,255,0.85)', dot: 3.5, dotColor: '#fff' });
  drawSkeleton(w * 0.5, w * 0.5, h, themes[ti]);
  ctx.strokeStyle = 'rgba(255,255,255,0.15)'; ctx.lineWidth = 1;
  ctx.beginPath(); ctx.moveTo(w * 0.5, 0); ctx.lineTo(w * 0.5, h); ctx.stroke();
  rtag.textContent = '생성 결과: ' + themes[ti].name;
}
render();
setInterval(() => { ti = (ti + 1) % themes.length; render(); }, 2400);