canvas两张图片叠加输出新图代码-html代码-BFW代码库

canvas两张图片叠加输出新图代码

代码语言：html

所属分类：其他

代码描述：canvas两张图片叠加输出新图代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Canvas 叠加两张图片并导出</title>
  <style>
    :root{
      --border: #e5e7eb;
      --muted: #6b7280;
      --primary: #2563eb;
      --bg: #f8fafc;
    }
    *{ box-sizing: border-box; }
    body{
      margin:0; background:var(--bg);
      font-family: system-ui,-apple-system,Segoe UI,Roboto,"PingFang SC","Microsoft YaHei",Arial,sans-serif;
      color:#111827;
    }
    .app{ max-width: 980px; margin: 24px auto; padding: 0 16px; }
    h1{ font-size: 20px; margin: 8px 0 16px; }
    .toolbar{
      display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px;
    }
    .btn, button{
      position: relative;
      display:inline-flex; align-items:center; gap:6px;
      height:36px; padding:0 12px; border-radius:8px; cursor:pointer;
      border:1px solid var(--border); background:#fff; color:#111;
      user-select:none;
    }
    .btn input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
    button.primary{ background:var(--primary); color:#fff; border:none; }
    button:disabled, .btn:has(input:disabled){
      opacity:.6; cursor:not-allowed;
    }
    .tip{ color:var(--muted); font-size:13px; }
    .canvas-wrap{
      background: #fff; border:1px solid var(--border); border-radius:10px;
      padding:8px; min-height: 320px;
    }
    .stage{
      width:100%;
      background:
        linear-gradient(45deg, #f3f4f6 25%, transparent 25%) 0 0/16px 16px,
        linear-gradient(45deg, transparent 75%, #f3f4f6 75%) 0 0/16px 16px,
        linear-gradient(45deg, #f3f4f6 25%, transparent 25%) 8px 8px/16px 16px,
        linear-gradient(45deg, transparent 75%, #f3f4f6 75%) 8px 8px/16px 16px;
      border-radius:8px;
      overflow:auto;
    }
    canvas{ display:block; margin:0 auto; background:#fff; border-radius:6px; }
    .legend{ margin-top:8px; color:var(--muted); font-size:12px; }
    .kbd{ font-family: ui-monospace,Menlo,Consolas,monospace; background:#f3f4f6; padding.........完整代码请登录后点击上方下载按钮下载查看