Home Explore Help
Register Sign In
root
/
blog_web
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Branch: master
Branches Tags
blog_web
/
pages
/
829589
/
index.html

index.html 199 KB
Permalink History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="utf-8">
    5. 

  5.     <meta name="viewport" content="width=device-width,initial-scale=1">
    6. 

  6.     <title>我做了一个手写春联小网页，祝大家虎年暴富 | 彪哥博客</title>
    7. 

  7.     <meta name="generator" content="VuePress 1.9.5">
    8. 

  8.     <link rel="icon" href="/blog/img/favicon.ico">
    9. 

  9.     <meta name="description" content="web前端技术博客,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,React,python,css3,html5,Node,git,github等技术文章。">
    10. 

  10.     <meta name="keywords" content="前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown">
    11. 

  11.     <meta name="theme-color" content="#11a8cd">
    12. 

  12.     
    13. 

  13.     <link rel="preload" href="/blog/assets/css/0.styles.dc03b589.css" as="style"><link rel="preload" href="/blog/assets/js/app.90754bd5.js" as="script"><link rel="preload" href="/blog/assets/js/2.106f41fb.js" as="script"><link rel="preload" href="/blog/assets/js/3.6748bd5c.js" as="script"><link rel="preload" href="/blog/assets/js/85.24532d6a.js" as="script"><link rel="prefetch" href="/blog/assets/js/10.cad3aa70.js"><link rel="prefetch" href="/blog/assets/js/100.08a8b2d8.js"><link rel="prefetch" href="/blog/assets/js/101.2aabb12c.js"><link rel="prefetch" href="/blog/assets/js/102.13f3cc4d.js"><link rel="prefetch" href="/blog/assets/js/103.c19aee03.js"><link rel="prefetch" href="/blog/assets/js/104.91a6aec1.js"><link rel="prefetch" href="/blog/assets/js/105.71de1aa4.js"><link rel="prefetch" href="/blog/assets/js/106.207422de.js"><link rel="prefetch" href="/blog/assets/js/107.bf754f60.js"><link rel="prefetch" href="/blog/assets/js/108.87ddbf21.js"><link rel="prefetch" href="/blog/assets/js/109.de6075c6.js"><link rel="prefetch" href="/blog/assets/js/11.f2e9eca8.js"><link rel="prefetch" href="/blog/assets/js/110.f19c57ae.js"><link rel="prefetch" href="/blog/assets/js/111.da99a105.js"><link rel="prefetch" href="/blog/assets/js/112.9dd75c6f.js"><link rel="prefetch" href="/blog/assets/js/113.9322f157.js"><link rel="prefetch" href="/blog/assets/js/114.c5150cc6.js"><link rel="prefetch" href="/blog/assets/js/115.4fb547bf.js"><link rel="prefetch" href="/blog/assets/js/116.2ddf1aa8.js"><link rel="prefetch" href="/blog/assets/js/117.3c970f48.js"><link rel="prefetch" href="/blog/assets/js/118.921e1d54.js"><link rel="prefetch" href="/blog/assets/js/119.0141defb.js"><link rel="prefetch" href="/blog/assets/js/12.98512c60.js"><link rel="prefetch" href="/blog/assets/js/120.de47a761.js"><link rel="prefetch" href="/blog/assets/js/121.a0b3693a.js"><link rel="prefetch" href="/blog/assets/js/122.6c7dd225.js"><link rel="prefetch" href="/blog/assets/js/123.dbff103c.js"><link rel="prefetch" href="/blog/assets/js/124.493776ef.js"><link rel="prefetch" href="/blog/assets/js/125.554c9fbf.js"><link rel="prefetch" href="/blog/assets/js/126.2421fe84.js"><link rel="prefetch" href="/blog/assets/js/127.805f10a4.js"><link rel="prefetch" href="/blog/assets/js/128.6543adba.js"><link rel="prefetch" href="/blog/assets/js/129.d7c56b92.js"><link rel="prefetch" href="/blog/assets/js/13.a79fa0c7.js"><link rel="prefetch" href="/blog/assets/js/130.593d21f0.js"><link rel="prefetch" href="/blog/assets/js/131.4c90d8b8.js"><link rel="prefetch" href="/blog/assets/js/132.4ad12bdc.js"><link rel="prefetch" href="/blog/assets/js/133.485de1b9.js"><link rel="prefetch" href="/blog/assets/js/134.78bc8f57.js"><link rel="prefetch" href="/blog/assets/js/135.47498729.js"><link rel="prefetch" href="/blog/assets/js/136.d99350df.js"><link rel="prefetch" href="/blog/assets/js/137.57ba6d3f.js"><link rel="prefetch" href="/blog/assets/js/138.d976c801.js"><link rel="prefetch" href="/blog/assets/js/139.766f20b7.js"><link rel="prefetch" href="/blog/assets/js/14.0fdf0c78.js"><link rel="prefetch" href="/blog/assets/js/140.0d9b8fbc.js"><link rel="prefetch" href="/blog/assets/js/141.128b6e26.js"><link rel="prefetch" href="/blog/assets/js/142.e004a584.js"><link rel="prefetch" href="/blog/assets/js/143.5a19a0b2.js"><link rel="prefetch" href="/blog/assets/js/144.5f397211.js"><link rel="prefetch" href="/blog/assets/js/145.cde5f3a0.js"><link rel="prefetch" href="/blog/assets/js/146.4185092c.js"><link rel="prefetch" href="/blog/assets/js/147.ac0e55d3.js"><link rel="prefetch" href="/blog/assets/js/148.30f02604.js"><link rel="prefetch" href="/blog/assets/js/149.760a79ed.js"><link rel="prefetch" href="/blog/assets/js/15.fce722b2.js"><link rel="prefetch" href="/blog/assets/js/150.3a1675b7.js"><link rel="prefetch" href="/blog/assets/js/151.0d73a46e.js"><link rel="prefetch" href="/blog/assets/js/152.c9c054d4.js"><link rel="prefetch" href="/blog/assets/js/153.b007c8a2.js"><link rel="prefetch" href="/blog/assets/js/154.a3acc6bf.js"><link rel="prefetch" href="/blog/assets/js/155.b5c0abcd.js"><link rel="prefetch" href="/blog/assets/js/156.2ba750fc.js"><link rel="prefetch" href="/blog/assets/js/157.fe92af0c.js"><link rel="prefetch" href="/blog/assets/js/158.e16fda40.js"><link rel="prefetch" href="/blog/assets/js/159.7fc7fd44.js"><link rel="prefetch" href="/blog/assets/js/16.871928af.js"><link rel="prefetch" href="/blog/assets/js/160.b581a0f4.js"><link rel="prefetch" href="/blog/assets/js/161.97acae68.js"><link rel="prefetch" href="/blog/assets/js/162.cec1b9a3.js"><link rel="prefetch" href="/blog/assets/js/163.a00f98f7.js"><link rel="prefetch" href="/blog/assets/js/164.cbf4cf52.js"><link rel="prefetch" href="/blog/assets/js/165.bc7a523a.js"><link rel="prefetch" href="/blog/assets/js/166.ca626fb4.js"><link rel="prefetch" href="/blog/assets/js/167.0ca68106.js"><link rel="prefetch" href="/blog/assets/js/168.2e605db8.js"><link rel="prefetch" href="/blog/assets/js/169.401b96d4.js"><link rel="prefetch" href="/blog/assets/js/17.2399cb2b.js"><link rel="prefetch" href="/blog/assets/js/170.7c8b0366.js"><link rel="prefetch" href="/blog/assets/js/171.c3155533.js"><link rel="prefetch" href="/blog/assets/js/172.b659d767.js"><link rel="prefetch" href="/blog/assets/js/173.62c681db.js"><link rel="prefetch" href="/blog/assets/js/174.5c66f092.js"><link rel="prefetch" href="/blog/assets/js/175.d41dd28b.js"><link rel="prefetch" href="/blog/assets/js/176.e60d7f0a.js"><link rel="prefetch" href="/blog/assets/js/177.10de95b1.js"><link rel="prefetch" href="/blog/assets/js/178.f301674d.js"><link rel="prefetch" href="/blog/assets/js/179.77bb52e9.js"><link rel="prefetch" href="/blog/assets/js/18.c338fe95.js"><link rel="prefetch" href="/blog/assets/js/180.d2a4e612.js"><link rel="prefetch" href="/blog/assets/js/181.a53e32e0.js"><link rel="prefetch" href="/blog/assets/js/182.38687994.js"><link rel="prefetch" href="/blog/assets/js/183.544fef00.js"><link rel="prefetch" href="/blog/assets/js/184.711e54a6.js"><link rel="prefetch" href="/blog/assets/js/185.20075148.js"><link rel="prefetch" href="/blog/assets/js/186.08c67f20.js"><link rel="prefetch" href="/blog/assets/js/187.7ca2d0c6.js"><link rel="prefetch" href="/blog/assets/js/188.cd167879.js"><link rel="prefetch" href="/blog/assets/js/189.e8e2eb21.js"><link rel="prefetch" href="/blog/assets/js/19.6b963460.js"><link rel="prefetch" href="/blog/assets/js/190.8b557318.js"><link rel="prefetch" href="/blog/assets/js/191.10d0f80b.js"><link rel="prefetch" href="/blog/assets/js/192.127fef4c.js"><link rel="prefetch" href="/blog/assets/js/193.781690eb.js"><link rel="prefetch" href="/blog/assets/js/194.4b375e2e.js"><link rel="prefetch" href="/blog/assets/js/195.003e3d67.js"><link rel="prefetch" href="/blog/assets/js/196.7a3f55e5.js"><link rel="prefetch" href="/blog/assets/js/197.30d4c5b4.js"><link rel="prefetch" href="/blog/assets/js/198.628c2c1a.js"><link rel="prefetch" href="/blog/assets/js/199.d7c8cbb8.js"><link rel="prefetch" href="/blog/assets/js/20.839dae41.js"><link rel="prefetch" href="/blog/assets/js/200.1fed86d2.js"><link rel="prefetch" href="/blog/assets/js/201.5ba078d9.js"><link rel="prefetch" href="/blog/assets/js/202.b49b23f4.js"><link rel="prefetch" href="/blog/assets/js/203.d88a03d9.js"><link rel="prefetch" href="/blog/assets/js/204.fb928277.js"><link rel="prefetch" href="/blog/assets/js/205.432c3d8d.js"><link rel="prefetch" href="/blog/assets/js/206.ed726599.js"><link rel="prefetch" href="/blog/assets/js/207.c3794556.js"><link rel="prefetch" href="/blog/assets/js/208.416f7a9e.js"><link rel="prefetch" href="/blog/assets/js/209.d396aad5.js"><link rel="prefetch" href="/blog/assets/js/21.bd21bd29.js"><link rel="prefetch" href="/blog/assets/js/210.02e4ee2f.js"><link rel="prefetch" href="/blog/assets/js/211.0f8a9304.js"><link rel="prefetch" href="/blog/assets/js/212.9220dd3d.js"><link rel="prefetch" href="/blog/assets/js/213.89521ebd.js"><link rel="prefetch" href="/blog/assets/js/214.cd5ec468.js"><link rel="prefetch" href="/blog/assets/js/215.0084d772.js"><link rel="prefetch" href="/blog/assets/js/216.ebd468b9.js"><link rel="prefetch" href="/blog/assets/js/217.fac21407.js"><link rel="prefetch" href="/blog/assets/js/218.9793e19a.js"><link rel="prefetch" href="/blog/assets/js/219.b99343b6.js"><link rel="prefetch" href="/blog/assets/js/22.e6bcf65d.js"><link rel="prefetch" href="/blog/assets/js/220.8065033b.js"><link rel="prefetch" href="/blog/assets/js/221.97268a80.js"><link rel="prefetch" href="/blog/assets/js/222.22bf261f.js"><link rel="prefetch" href="/blog/assets/js/223.d5ff1bff.js"><link rel="prefetch" href="/blog/assets/js/224.364b4b11.js"><link rel="prefetch" href="/blog/assets/js/225.bd8b00c7.js"><link rel="prefetch" href="/blog/assets/js/226.78192713.js"><link rel="prefetch" href="/blog/assets/js/227.06ec006e.js"><link rel="prefetch" href="/blog/assets/js/228.166546a8.js"><link rel="prefetch" href="/blog/assets/js/229.fd44d2be.js"><link rel="prefetch" href="/blog/assets/js/23.ebbc3fd3.js"><link rel="prefetch" href="/blog/assets/js/230.109a1752.js"><link rel="prefetch" href="/blog/assets/js/231.c6faedb6.js"><link rel="prefetch" href="/blog/assets/js/232.f938a3a8.js"><link rel="prefetch" href="/blog/assets/js/233.0dc59324.js"><link rel="prefetch" href="/blog/assets/js/234.bb73adca.js"><link rel="prefetch" href="/blog/assets/js/235.97ed69db.js"><link rel="prefetch" href="/blog/assets/js/236.a8c51930.js"><link rel="prefetch" href="/blog/assets/js/237.6ae31c88.js"><link rel="prefetch" href="/blog/assets/js/238.2f5c56ae.js"><link rel="prefetch" href="/blog/assets/js/239.506a4e9f.js"><link rel="prefetch" href="/blog/assets/js/24.19bd04ec.js"><link rel="prefetch" href="/blog/assets/js/25.b4de33d1.js"><link rel="prefetch" href="/blog/assets/js/26.0bb98ba9.js"><link rel="prefetch" href="/blog/assets/js/27.df98327e.js"><link rel="prefetch" href="/blog/assets/js/28.31289bac.js"><link rel="prefetch" href="/blog/assets/js/29.45af5621.js"><link rel="prefetch" href="/blog/assets/js/30.d5c08e66.js"><link rel="prefetch" href="/blog/assets/js/31.78e43a68.js"><link rel="prefetch" href="/blog/assets/js/32.53ca76ee.js"><link rel="prefetch" href="/blog/assets/js/33.081e8ef6.js"><link rel="prefetch" href="/blog/assets/js/34.cb1866c1.js"><link rel="prefetch" href="/blog/assets/js/35.314ba98e.js"><link rel="prefetch" href="/blog/assets/js/36.1f6a5fae.js"><link rel="prefetch" href="/blog/assets/js/37.45e6d22f.js"><link rel="prefetch" href="/blog/assets/js/38.70b82353.js"><link rel="prefetch" href="/blog/assets/js/39.df6c26ac.js"><link rel="prefetch" href="/blog/assets/js/4.44654b1a.js"><link rel="prefetch" href="/blog/assets/js/40.80101c19.js"><link rel="prefetch" href="/blog/assets/js/41.2b5e8c27.js"><link rel="prefetch" href="/blog/assets/js/42.c6ded3fe.js"><link rel="prefetch" href="/blog/assets/js/43.6d9424d6.js"><link rel="prefetch" href="/blog/assets/js/44.835e4b5c.js"><link rel="prefetch" href="/blog/assets/js/45.d74d29a2.js"><link rel="prefetch" href="/blog/assets/js/46.d15a7dc0.js"><link rel="prefetch" href="/blog/assets/js/47.8d66ca97.js"><link rel="prefetch" href="/blog/assets/js/48.3c1102e1.js"><link rel="prefetch" href="/blog/assets/js/49.e17a3436.js"><link rel="prefetch" href="/blog/assets/js/5.88de390f.js"><link rel="prefetch" href="/blog/assets/js/50.6750f186.js"><link rel="prefetch" href="/blog/assets/js/51.9f93af9f.js"><link rel="prefetch" href="/blog/assets/js/52.f3ef3b5e.js"><link rel="prefetch" href="/blog/assets/js/53.a6bacd25.js"><link rel="prefetch" href="/blog/assets/js/54.dbb7c9ab.js"><link rel="prefetch" href="/blog/assets/js/55.2562d0c8.js"><link rel="prefetch" href="/blog/assets/js/56.14ea4931.js"><link rel="prefetch" href="/blog/assets/js/57.a2fad780.js"><link rel="prefetch" href="/blog/assets/js/58.8165b971.js"><link rel="prefetch" href="/blog/assets/js/59.556cab0d.js"><link rel="prefetch" href="/blog/assets/js/6.277038ca.js"><link rel="prefetch" href="/blog/assets/js/60.f048aa7c.js"><link rel="prefetch" href="/blog/assets/js/61.bdb307a8.js"><link rel="prefetch" href="/blog/assets/js/62.37a94f10.js"><link rel="prefetch" href="/blog/assets/js/63.74811780.js"><link rel="prefetch" href="/blog/assets/js/64.81f21b8a.js"><link rel="prefetch" href="/blog/assets/js/65.d970ff03.js"><link rel="prefetch" href="/blog/assets/js/66.cb805d9b.js"><link rel="prefetch" href="/blog/assets/js/67.39f85baa.js"><link rel="prefetch" href="/blog/assets/js/68.7f79766a.js"><link rel="prefetch" href="/blog/assets/js/69.fa8624bd.js"><link rel="prefetch" href="/blog/assets/js/7.e0a6d1b0.js"><link rel="prefetch" href="/blog/assets/js/70.1f3e978d.js"><link rel="prefetch" href="/blog/assets/js/71.13cd9358.js"><link rel="prefetch" href="/blog/assets/js/72.739b22a8.js"><link rel="prefetch" href="/blog/assets/js/73.95f69ae2.js"><link rel="prefetch" href="/blog/assets/js/74.b6624f6a.js"><link rel="prefetch" href="/blog/assets/js/75.b0d9aa06.js"><link rel="prefetch" href="/blog/assets/js/76.681b78df.js"><link rel="prefetch" href="/blog/assets/js/77.46f6e413.js"><link rel="prefetch" href="/blog/assets/js/78.aebd00ee.js"><link rel="prefetch" href="/blog/assets/js/79.1b784d15.js"><link rel="prefetch" href="/blog/assets/js/8.9428e7ee.js"><link rel="prefetch" href="/blog/assets/js/80.1f550d53.js"><link rel="prefetch" href="/blog/assets/js/81.101cc131.js"><link rel="prefetch" href="/blog/assets/js/82.077c8298.js"><link rel="prefetch" href="/blog/assets/js/83.2e375d11.js"><link rel="prefetch" href="/blog/assets/js/84.38102a34.js"><link rel="prefetch" href="/blog/assets/js/86.1dabbf00.js"><link rel="prefetch" href="/blog/assets/js/87.763da0f2.js"><link rel="prefetch" href="/blog/assets/js/88.ff6e5f7c.js"><link rel="prefetch" href="/blog/assets/js/89.187e5e16.js"><link rel="prefetch" href="/blog/assets/js/9.da143545.js"><link rel="prefetch" href="/blog/assets/js/90.3c8cff94.js"><link rel="prefetch" href="/blog/assets/js/91.a50bd44d.js"><link rel="prefetch" href="/blog/assets/js/92.5484868f.js"><link rel="prefetch" href="/blog/assets/js/93.c8ee75e3.js"><link rel="prefetch" href="/blog/assets/js/94.b18a3e9b.js"><link rel="prefetch" href="/blog/assets/js/95.cddef6ae.js"><link rel="prefetch" href="/blog/assets/js/96.80e5a938.js"><link rel="prefetch" href="/blog/assets/js/97.1f5e5197.js"><link rel="prefetch" href="/blog/assets/js/98.e3a275c8.js"><link rel="prefetch" href="/blog/assets/js/99.d33bf89e.js">
    14. 

  14.     <link rel="stylesheet" href="/blog/assets/css/0.styles.dc03b589.css">
    15. 

  15.   </head>
    16. 

  16.   <body class="theme-mode-light">
    17. 

  17.     <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/blog/" class="home-link router-link-active"><img src="/blog/img/logo.png" alt="彪哥博客" class="logo"> <span class="site-name can-hide">彪哥博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/blog/" class="nav-link">首页</a></div><div class="nav-item"><a href="http://fseller.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
    18. 

  18.   个人游戏网站
    19. 

  19.   <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><a href="/blog/web/" class="link-title">前端</a> <span class="title" style="display:none;">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>前端文章</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/pages/8143cc480faf9a11/" class="nav-link">JavaScript</a></li></ul></li><li class="dropdown-item"><h4>学习笔记</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/note/javascript/" class="nav-link">《JavaScript教程》</a></li><li class="dropdown-subitem"><a href="/blog/note/js/" class="nav-link">《JavaScript高级程序设计》</a></li><li class="dropdown-subitem"><a href="/blog/note/es6/" class="nav-link">《ES6 教程》</a></li><li class="dropdown-subitem"><a href="/blog/note/vue/" class="nav-link">《Vue》</a></li><li class="dropdown-subitem"><a href="/blog/note/react/" class="nav-link">《React》</a></li><li class="dropdown-subitem"><a href="/blog/note/typescript-axios/" class="nav-link">《TypeScript 从零实现 axios》</a></li><li class="dropdown-subitem"><a href="/blog/note/git/" class="nav-link">《Git》</a></li><li class="dropdown-subitem"><a href="/blog/pages/51afd6/" class="nav-link">TypeScript</a></li><li class="dropdown-subitem"><a href="/blog/pages/4643cd/" class="nav-link">JS设计模式总结</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="页面" class="dropdown-title"><a href="/blog/ui/" class="link-title">页面</a> <span class="title" style="display:none;">页面</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/pages/8309a5b876fc95e3/" class="nav-link">HTML</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/0a83b083bdf257cb/" class="nav-link">CSS</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="技术" class="dropdown-title"><a href="/blog/technology/" class="link-title">技术</a> <span class="title" style="display:none;">技术</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/pages/9a7ee40fc232253e/" class="nav-link">技术文档</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/4c778760be26d8b3/" class="nav-link">GitHub技巧</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/117708e0af7f0bd9/" class="nav-link">Nodejs</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/41f87d890d0a02af/" class="nav-link">博客搭建</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="更多" class="dropdown-title"><a href="/blog/more/" class="link-title">更多</a> <span class="title" style="display:none;">更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/pages/f2a556/" class="nav-link">学习</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/aea6571b7a8bae86/" class="nav-link">面试</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/2d615df9a36a98ed/" class="nav-link">心情杂货</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/baaa02/" class="nav-link">实用技巧</a></li><li class="dropdown-item"><!----> <a href="/blog/friends/" class="nav-link">友情链接</a></li></ul></div></div><div class="nav-item"><a href="/blog/about/" class="nav-link">关于</a></div><div class="nav-item"><a href="/blog/pages/beb6c0bd8a66cea6/" class="nav-link">收藏</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/blog/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/blog/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/blog/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/heBody/blog" target="_blank" rel="noopener noreferrer" class="repo-link">
    20. 

  20.     GitHub
    21. 

  21.     <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><div class="blogger"><img src="/blog/img/head.jpg"> <div class="blogger-info"><h3>彪哥</h3> <span>爱好前端</span></div></div> <nav class="nav-links"><div class="nav-item"><a href="/blog/" class="nav-link">首页</a></div><div class="nav-item"><a href="http://fseller.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
    22. 

  22.   个人游戏网站
    23. 

  23.   <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><a href="/blog/web/" class="link-title">前端</a> <span class="title" style="display:none;">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>前端文章</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/pages/8143cc480faf9a11/" class="nav-link">JavaScript</a></li></ul></li><li class="dropdown-item"><h4>学习笔记</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/note/javascript/" class="nav-link">《JavaScript教程》</a></li><li class="dropdown-subitem"><a href="/blog/note/js/" class="nav-link">《JavaScript高级程序设计》</a></li><li class="dropdown-subitem"><a href="/blog/note/es6/" class="nav-link">《ES6 教程》</a></li><li class="dropdown-subitem"><a href="/blog/note/vue/" class="nav-link">《Vue》</a></li><li class="dropdown-subitem"><a href="/blog/note/react/" class="nav-link">《React》</a></li><li class="dropdown-subitem"><a href="/blog/note/typescript-axios/" class="nav-link">《TypeScript 从零实现 axios》</a></li><li class="dropdown-subitem"><a href="/blog/note/git/" class="nav-link">《Git》</a></li><li class="dropdown-subitem"><a href="/blog/pages/51afd6/" class="nav-link">TypeScript</a></li><li class="dropdown-subitem"><a href="/blog/pages/4643cd/" class="nav-link">JS设计模式总结</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="页面" class="dropdown-title"><a href="/blog/ui/" class="link-title">页面</a> <span class="title" style="display:none;">页面</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/pages/8309a5b876fc95e3/" class="nav-link">HTML</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/0a83b083bdf257cb/" class="nav-link">CSS</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="技术" class="dropdown-title"><a href="/blog/technology/" class="link-title">技术</a> <span class="title" style="display:none;">技术</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/pages/9a7ee40fc232253e/" class="nav-link">技术文档</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/4c778760be26d8b3/" class="nav-link">GitHub技巧</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/117708e0af7f0bd9/" class="nav-link">Nodejs</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/41f87d890d0a02af/" class="nav-link">博客搭建</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="更多" class="dropdown-title"><a href="/blog/more/" class="link-title">更多</a> <span class="title" style="display:none;">更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/pages/f2a556/" class="nav-link">学习</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/aea6571b7a8bae86/" class="nav-link">面试</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/2d615df9a36a98ed/" class="nav-link">心情杂货</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/baaa02/" class="nav-link">实用技巧</a></li><li class="dropdown-item"><!----> <a href="/blog/friends/" class="nav-link">友情链接</a></li></ul></div></div><div class="nav-item"><a href="/blog/about/" class="nav-link">关于</a></div><div class="nav-item"><a href="/blog/pages/beb6c0bd8a66cea6/" class="nav-link">收藏</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/blog/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/blog/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/blog/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/heBody/blog" target="_blank" rel="noopener noreferrer" class="repo-link">
    24. 

  24.     GitHub
    25. 

  25.     <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>我做了一个手写春联小网页，祝大家虎年暴富</span> <!----></p> <!----></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="articleInfo-wrap" data-v-06970110><div class="articleInfo" data-v-06970110><!----> <div class="info" data-v-06970110><div title="作者" class="author iconfont icon-touxiang" data-v-06970110><a href="https://github.com/heBody" target="_blank" title="作者" class="beLink" data-v-06970110>heBody</a></div> <div title="创建时间" class="date iconfont icon-riqi" data-v-06970110><a href="javascript:;" data-v-06970110>2022-01-28</a></div> <div title="分类" class="date iconfont icon-wenjian" data-v-06970110><a href="/blog/categories/?category=%E9%9A%8F%E7%AC%94" data-v-06970110>随笔 </a></div></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABKFJREFUSA3tVl1oFVcQnrMbrak3QUgkya1akpJYcrUtIqW1JvFBE9LiQ5v6JmJpolbMg32rVrhgoYK0QiMY6i9Y6EMaW5D+xFJaTYItIuK2Kr3+BJNwkxBj05sQY3b3nM6cs2dv9t7NT/vQJw/sndk5M/PNzJkzewGerP+pAmy+ON8lLzUJgA8ZYxYIYZmGYRnctDaWvJJAmTtfP1pvXsBCCPP8QFcCaRkZYACgDZFO4stNIcBCajEOlmmC9XpJ9bAGCaPaPmzPl32dvLSVu3BWCTQs0XQQ6g0DYgwLIoAZbBCdW/i+781o1VVlm/410mw4h06Y7bIPHNyWDyL4FHkX03Q8SrzNhZTZriieckWt7cL6MM85YcLpsi/7O9/iXFT6MswI0DmmpkSaJ0qLxFIm3+i1THHB3zmBH3PYx9CcykcLOeQVVa7QtdxTgQgEleX2AjHYfwA+2ddV77ruGoJUbhGDI09YSNXyMpUt5ylOzxgbUmtOp7NmbNt8v3arjTBfYELmLUV+M+nSawNNAUqpT3ClJWg5I3BLT+cGW/DXNGCa6tx1aakCGEigArTn4TDIPdrXXYKCZNrHLMCOEPvHBlLQ99s9eHB7EB6NTki73CVPQ2F5MSx/uRQixfmq7rK0wYD8w8E905bnPDfwoWs/rfv93NWN/ZfvwsLIU7A09gxECyISeGJkHAau98L97tuw7NXnoPyNF8FcYGLGKsOs0mN3OEyec9esGW/ZEl945dTP34wlR2FZVQWU1q0Cw8Tr7p+hgLLNL0FPxx/Q35mA8aEUrH6nCgwEl0tn7wUiZYJnNRh6DK4UH/k0lfyrsBKdPVv/AriGIQcEDQZ65LBAGe2Rzui9Ybjz7XUppz1/uKBbyVPGkN3ZAeC6hr0x7Nr38N5+EqkoOm17xpoqR9ohQF55ERSvr4Dkr3chNfC3DMzGJlNBElW8w9nsGQvhNGIzDkXzCg8cLK951xHsFBlTJspJNi3ZFIMF2AeDV3q8DNOB+YHi6QTrChDIWDBRi5U5f+ZMfJLu3ccrqxtdxk4SKH336LFxSmkqefwU5T8fhdSdQf9IVKD6aNiwI/hnmcAZ91isYMJIaCUCx9W098+LgruikeTqzqqxKPUwqJyCPJiyemVVZBOijDGjD38Os0jOiSPL1z3SPjXNANbiNPXAdzTfukjjuknNBbyz3nwgTd3AVFqUJ5hpHlq9MveLnWwttUfoygBmvVjuikxND3znrhsELnZk7k+OjIGxeNEkomyLVta0xxn+HZhjBc4YZ/AFjHjz9u3xRZl2BN4aq9nFwWh16IrQ1aHHEd3j1+4/dB9OtH4e29A2H1DyHQRmOSfQZ1Fy7MHBTGB6J/Djq6p3OxyO2cB+4Car7v/o3GXgfAkj23+x9ID1Teoamo/SXcbvSf2PX7Vc8DdCmE1vN9di+32P9/5YR3vLnhCVGUWBjEkr3yh4H8v9CzmsbdhzOKzsJKM90iFdaTMjRPhGVsakRvOaRidljo6H6G7j+ctrJpsP+4COhDIl0La2+FS4+5mlocBaXY5QnGZysIBYoeSsl5qQzrSj/cgNrfuEzlWBfwA+EjrZyWUvpAAAAABJRU5ErkJggg==">我做了一个手写春联小网页，祝大家虎年暴富<span class="title-tag">原创</span></h1>  <div class="theme-vdoing-content content__default"><h3 id="前言"><a href="#前言" class="header-anchor">#</a> 前言</h3> <p>虎年春节快到了，首先祝大家新年快乐，轻松暴富。
    26. 

  26. 最近在网上经常看到生成春联的文章，不过这些小demo要么功能简陋,要么UI特别‘程序员’，满足不了我挑剔的眼光。干脆我自己做一个吧，顺便简单体验一下vite+vue3。（因为页面相对简单，vue组件风格还是使用选项式api，重点还是想把产品快速做出来。）</p> <p align="center"><img src="https://img-blog.csdnimg.cn/img_convert/185c88180b87ac7277072280a0c144ce.png" width="500" style="cursor:zoom-in;"></p> <h3 id="产品构思"><a href="#产品构思" class="header-anchor">#</a> 产品构思</h3> <p>包含<code>手写春节</code>和<code>生成春联</code>两大功能：</p> <ul><li><p><strong>手写春联</strong></p> <ul><li>模拟用笔写字的字迹</li> <li>选择画笔颜色</li> <li>调整画笔大小</li> <li>清空画布</li> <li>撤回笔画</li> <li>切换上、下联、横批、福字</li> <li>随机切换对联提示</li> <li>预览图片和下载</li> <li>贴春联海报和下载</li></ul></li> <li><p><strong>生成模式</strong></p> <ul><li>选择画笔颜色</li> <li>挑选生成的对联</li> <li>输入对联</li> <li>随机切换对联</li> <li>贴春联海报和下载</li></ul></li> <li><p><strong>其他</strong></p> <ul><li>快速切换模式按钮</li> <li>可控制的背景音乐</li> <li>微信分享网页</li></ul></li></ul> <h3 id="设计"><a href="#设计" class="header-anchor">#</a> 设计</h3> <p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/392f2036c0ce4c97b8562e6f17606491~tplv-k3u1fbpfcp-watermark.image?" alt="222.jpg"></p> <h3 id="开发"><a href="#开发" class="header-anchor">#</a> 开发</h3> <ul><li><strong>技术栈</strong> <ul><li>vite (打包&amp;构建)</li> <li>vue3 (页面开发)</li> <li>vant（ui）</li> <li>sass (css)</li> <li><a href="https://github.com/linjc/smooth-signature" target="_blank" rel="noopener noreferrer">smooth-signature.js (带笔锋手写库)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
    27. 

  27.   <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;wrap&quot;</span> <span class="token operator">:</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;'mode-' + mode&quot;</span> @touchstart<span class="token operator">=</span><span class="token string">&quot;handleTouchstart&quot;</span><span class="token operator">&gt;</span>
    28. 

  28.     <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 切换模式按钮 <span class="token operator">--</span><span class="token operator">&gt;</span>
    29. 

  29.     <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;toggle-mode-btn&quot;</span> @click<span class="token operator">=</span><span class="token string">&quot;toggleMode&quot;</span><span class="token operator">&gt;</span>
    30. 

  30.       <span class="token punctuation">{</span><span class="token punctuation">{</span> mode <span class="token operator">===</span> <span class="token number">1</span> <span class="token operator">?</span> <span class="token string">'手写'</span> <span class="token operator">:</span> <span class="token string">'生成'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span>
    31. 

  31.       <span class="token operator">&lt;</span>i <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;iconfont icon-qiehuan&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>i<span class="token operator">&gt;</span>
    32. 

  32.     <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    33. 

  33. 

  34.     <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 工具栏 <span class="token operator">--</span><span class="token operator">&gt;</span>
    35. 

  35.     <span class="token operator">&lt;</span>div
    36. 

  36.       <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;actions&quot;</span>
    37. 

  37.       <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;{ borderTopRightRadius: colorListVisibility ? '0' : '5px' }&quot;</span>
    38. 

  38.     <span class="token operator">&gt;</span>
    39. 

  39.       <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 手写模式显示 <span class="token operator">--</span><span class="token operator">&gt;</span>
    40. 

  40.       <span class="token operator">&lt;</span>template v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;mode === 1&quot;</span><span class="token operator">&gt;</span>
    41. 

  41.         <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 调色板 <span class="token operator">--</span><span class="token operator">&gt;</span>
    42. 

  42.         <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;palette btn-block&quot;</span><span class="token operator">&gt;</span>
    43. 

  43.           <span class="token operator">&lt;</span>div
    44. 

  44.             <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;cur-color&quot;</span>
    45. 

  45.             @click<span class="token operator">=</span><span class="token string">&quot;togglePalette&quot;</span>
    46. 

  46.             <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;{ background: colorList[curColorIndex] }&quot;</span>
    47. 

  47.           <span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    48. 

  48.           <span class="token operator">&lt;</span>ul <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;colorList&quot;</span> v<span class="token operator">-</span>show<span class="token operator">=</span><span class="token string">&quot;colorListVisibility&quot;</span><span class="token operator">&gt;</span>
    49. 

  49.             <span class="token operator">&lt;</span>li
    50. 

  50.               v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">&quot;(item, index) in colorList&quot;</span>
    51. 

  51.               <span class="token operator">:</span>key<span class="token operator">=</span><span class="token string">&quot;item&quot;</span>
    52. 

  52.               <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;{ background: item }&quot;</span>
    53. 

  53.               @click<span class="token operator">=</span><span class="token string">&quot;selectColor(index)&quot;</span>
    54. 

  54.             <span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">&gt;</span>
    55. 

  55.           <span class="token operator">&lt;</span><span class="token operator">/</span>ul<span class="token operator">&gt;</span>
    56. 

  56.         <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    57. 

  57. 

  58.         <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 滑块 <span class="token operator">--</span><span class="token operator">&gt;</span>
    59. 

  59.         <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;slider-box btn-block&quot;</span><span class="token operator">&gt;</span>
    60. 

  60.           <span class="token operator">&lt;</span>van<span class="token operator">-</span>slider
    61. 

  61.             v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">&quot;progress&quot;</span>
    62. 

  62.             vertical
    63. 

  63.             @change<span class="token operator">=</span><span class="token string">&quot;changeProgress&quot;</span>
    64. 

  64.             bar<span class="token operator">-</span>height<span class="token operator">=</span><span class="token string">&quot;28&quot;</span>
    65. 

  65.             active<span class="token operator">-</span>color<span class="token operator">=</span><span class="token string">&quot;transparent&quot;</span>
    66. 

  66.             <span class="token operator">:</span>min<span class="token operator">=</span><span class="token string">&quot;50&quot;</span>
    67. 

  67.             <span class="token operator">:</span>max<span class="token operator">=</span><span class="token string">&quot;150&quot;</span>
    68. 

  68.           <span class="token operator">&gt;</span>
    69. 

  69.             <span class="token operator">&lt;</span>template #button<span class="token operator">&gt;</span>
    70. 

  70.               <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;custom-button&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    71. 

  71.             <span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
    72. 

  72.           <span class="token operator">&lt;</span><span class="token operator">/</span>van<span class="token operator">-</span>slider<span class="token operator">&gt;</span>
    73. 

  73.         <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    74. 

  74. 

  75.         <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 清空 <span class="token operator">--</span><span class="token operator">&gt;</span>
    76. 

  76.         <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;btn&quot;</span> @click<span class="token operator">=</span><span class="token string">&quot;handleClear&quot;</span><span class="token operator">&gt;</span>
    77. 

  77.           <span class="token operator">&lt;</span>i <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;iconfont icon-lajitong&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>i<span class="token operator">&gt;</span>
    78. 

  78.         <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    79. 

  79. 

  80.         <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 撤销 <span class="token operator">--</span><span class="token operator">&gt;</span>
    81. 

  81.         <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;btn&quot;</span> @click<span class="token operator">=</span><span class="token string">&quot;handleUndo&quot;</span><span class="token operator">&gt;</span>
    82. 

  82.           <span class="token operator">&lt;</span>i <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;iconfont icon-fanhui&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>i<span class="token operator">&gt;</span>
    83. 

  83.         <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    84. 

  84. 

  85.         <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;line&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    86. 

  86. 

  87.         <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 切换画布的按钮 <span class="token operator">--</span><span class="token operator">&gt;</span>
    88. 

  88.         <span class="token operator">&lt;</span>div
    89. 

  89.           <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;btn&quot;</span>
    90. 

  90.           <span class="token operator">:</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;{ 'cur-active': curCanvasIndex === index }&quot;</span>
    91. 

  91.           v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">&quot;(item, index) in canvasList&quot;</span>
    92. 

  92.           <span class="token operator">:</span>key<span class="token operator">=</span><span class="token string">&quot;item.name&quot;</span>
    93. 

  93.           @click<span class="token operator">=</span><span class="token string">&quot;changeCanvas(index)&quot;</span>
    94. 

  94.         <span class="token operator">&gt;</span>
    95. 

  95.           <span class="token punctuation">{</span><span class="token punctuation">{</span> item<span class="token punctuation">.</span>name <span class="token punctuation">}</span><span class="token punctuation">}</span>
    96. 

  96.         <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    97. 

  97. 

  98.         <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;line&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    99. 

  99. 

  100.         <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;btn prominent&quot;</span> @click<span class="token operator">=</span><span class="token string">&quot;handlePreview&quot;</span><span class="token operator">&gt;</span>预览<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    101. 

  101.         <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;btn prominent&quot;</span> @click<span class="token operator">=</span><span class="token string">&quot;openPosters&quot;</span><span class="token operator">&gt;</span>贴联<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    102. 

  102.       <span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
    103. 

  103. 

  104.       <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 生成模式显示 <span class="token operator">--</span><span class="token operator">&gt;</span>
    105. 

  105.       <span class="token operator">&lt;</span>template v<span class="token operator">-</span><span class="token keyword">else</span><span class="token operator">&gt;</span>
    106. 

  106.         <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 选颜色 <span class="token operator">--</span><span class="token operator">&gt;</span>
    107. 

  107.         <span class="token operator">&lt;</span>div
    108. 

  108.           <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;color-list-quick&quot;</span>
    109. 

  109.           <span class="token operator">:</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;{ active: curColorIndex === index }&quot;</span>
    110. 

  110.           v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">&quot;(item, index) in colorList&quot;</span>
    111. 

  111.           <span class="token operator">:</span>key<span class="token operator">=</span><span class="token string">&quot;item&quot;</span>
    112. 

  112.           <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;{ background: item }&quot;</span>
    113. 

  113.           @click<span class="token operator">=</span><span class="token string">&quot;selectColor(index)&quot;</span>
    114. 

  114.         <span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    115. 

  115.         <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;line&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    116. 

  116.         <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;btn&quot;</span> @click<span class="token operator">=</span><span class="token string">&quot;showPickBox = true&quot;</span><span class="token operator">&gt;</span>挑选<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    117. 

  117.         <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;btn&quot;</span> @click<span class="token operator">=</span><span class="token string">&quot;showInputBox = true&quot;</span><span class="token operator">&gt;</span>输入<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    118. 

  118. 

  119.         <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 挑选对联弹窗 <span class="token operator">--</span><span class="token operator">&gt;</span>
    120. 

  120.         <span class="token operator">&lt;</span>van<span class="token operator">-</span>action<span class="token operator">-</span>sheet v<span class="token operator">-</span>model<span class="token operator">:</span>show<span class="token operator">=</span><span class="token string">&quot;showPickBox&quot;</span> title<span class="token operator">=</span><span class="token string">&quot;请挑选对联&quot;</span><span class="token operator">&gt;</span>
    121. 

  121.           <span class="token operator">&lt;</span>ul <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;duilian-list&quot;</span><span class="token operator">&gt;</span>
    122. 

  122.             <span class="token operator">&lt;</span>li
    123. 

  123.               v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">&quot;(item, index) in duilianList&quot;</span>
    124. 

  124.               <span class="token operator">:</span>key<span class="token operator">=</span><span class="token string">&quot;index&quot;</span>
    125. 

  125.               @click<span class="token operator">=</span><span class="token string">&quot;handlePickDuilian(item)&quot;</span>
    126. 

  126.             <span class="token operator">&gt;</span>
    127. 

  127.               <span class="token operator">&lt;</span>span<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span> item<span class="token punctuation">.</span>shang <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>span
    128. 

  128.               <span class="token operator">&gt;</span>， <span class="token operator">&lt;</span>span<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span> item<span class="token punctuation">.</span>xia <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>span
    129. 

  129.               <span class="token operator">&gt;</span>。
    130. 

  130.               <span class="token operator">&lt;</span>span<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span> item<span class="token punctuation">.</span>heng <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
    131. 

  131.             <span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">&gt;</span>
    132. 

  132.           <span class="token operator">&lt;</span><span class="token operator">/</span>ul<span class="token operator">&gt;</span>
    133. 

  133.         <span class="token operator">&lt;</span><span class="token operator">/</span>van<span class="token operator">-</span>action<span class="token operator">-</span>sheet<span class="token operator">&gt;</span>
    134. 

  134. 

  135.         <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 输入对联弹窗 <span class="token operator">--</span><span class="token operator">&gt;</span>
    136. 

  136.         <span class="token operator">&lt;</span>van<span class="token operator">-</span>action<span class="token operator">-</span>sheet v<span class="token operator">-</span>model<span class="token operator">:</span>show<span class="token operator">=</span><span class="token string">&quot;showInputBox&quot;</span> title<span class="token operator">=</span><span class="token string">&quot;请输入对联&quot;</span><span class="token operator">&gt;</span>
    137. 

  137.           <span class="token operator">&lt;</span>van<span class="token operator">-</span>form @submit<span class="token operator">=</span><span class="token string">&quot;handleSubmitInput&quot;</span><span class="token operator">&gt;</span>
    138. 

  138.             <span class="token operator">&lt;</span>van<span class="token operator">-</span>cell<span class="token operator">-</span>group inset<span class="token operator">&gt;</span>
    139. 

  139.               <span class="token operator">&lt;</span>van<span class="token operator">-</span>field
    140. 

  140.                 v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">&quot;shanglian&quot;</span>
    141. 

  141.                 name<span class="token operator">=</span><span class="token string">&quot;shang&quot;</span>
    142. 

  142.                 label<span class="token operator">=</span><span class="token string">&quot;上联&quot;</span>
    143. 

  143.                 placeholder<span class="token operator">=</span><span class="token string">&quot;上联&quot;</span>
    144. 

  144.                 <span class="token operator">:</span>rules<span class="token operator">=</span>&quot;<span class="token punctuation">[</span>
    145. 

  145.                   <span class="token punctuation">{</span>
    146. 

  146.                     <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    147. 

  147.                     <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'请输入7位汉字上联'</span><span class="token punctuation">,</span>
    148. 

  148.                     <span class="token literal-property property">pattern</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^[\u4e00-\u9fa5]{7}$</span><span class="token regex-delimiter">/</span></span>
    149. 

  149.                   <span class="token punctuation">}</span>
    150. 

  150.                 <span class="token punctuation">]</span>&quot;
    151. 

  151.                 clearable
    152. 

  152.               <span class="token operator">/</span><span class="token operator">&gt;</span>
    153. 

  153.               <span class="token operator">&lt;</span>van<span class="token operator">-</span>field
    154. 

  154.                 v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">&quot;xialian&quot;</span>
    155. 

  155.                 name<span class="token operator">=</span><span class="token string">&quot;xia&quot;</span>
    156. 

  156.                 label<span class="token operator">=</span><span class="token string">&quot;下联&quot;</span>
    157. 

  157.                 placeholder<span class="token operator">=</span><span class="token string">&quot;下联&quot;</span>
    158. 

  158.                 <span class="token operator">:</span>rules<span class="token operator">=</span>&quot;<span class="token punctuation">[</span>
    159. 

  159.                   <span class="token punctuation">{</span>
    160. 

  160.                     <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    161. 

  161.                     <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'请输入7位汉字下联'</span><span class="token punctuation">,</span>
    162. 

  162.                     <span class="token literal-property property">pattern</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^[\u4e00-\u9fa5]{7}$</span><span class="token regex-delimiter">/</span></span>
    163. 

  163.                   <span class="token punctuation">}</span>
    164. 

  164.                 <span class="token punctuation">]</span>&quot;
    165. 

  165.                 clearable
    166. 

  166.               <span class="token operator">/</span><span class="token operator">&gt;</span>
    167. 

  167.               <span class="token operator">&lt;</span>van<span class="token operator">-</span>field
    168. 

  168.                 v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">&quot;hengpi&quot;</span>
    169. 

  169.                 name<span class="token operator">=</span><span class="token string">&quot;heng&quot;</span>
    170. 

  170.                 label<span class="token operator">=</span><span class="token string">&quot;横批&quot;</span>
    171. 

  171.                 placeholder<span class="token operator">=</span><span class="token string">&quot;横批&quot;</span>
    172. 

  172.                 <span class="token operator">:</span>rules<span class="token operator">=</span>&quot;<span class="token punctuation">[</span>
    173. 

  173.                   <span class="token punctuation">{</span>
    174. 

  174.                     <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    175. 

  175.                     <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'请输入4位汉字横批'</span><span class="token punctuation">,</span>
    176. 

  176.                     <span class="token literal-property property">pattern</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^[\u4e00-\u9fa5]{4}$</span><span class="token regex-delimiter">/</span></span>
    177. 

  177.                   <span class="token punctuation">}</span>
    178. 

  178.                 <span class="token punctuation">]</span>&quot;
    179. 

  179.                 clearable
    180. 

  180.               <span class="token operator">/</span><span class="token operator">&gt;</span>
    181. 

  181.             <span class="token operator">&lt;</span><span class="token operator">/</span>van<span class="token operator">-</span>cell<span class="token operator">-</span>group<span class="token operator">&gt;</span>
    182. 

  182.             <span class="token operator">&lt;</span>div style<span class="token operator">=</span><span class="token string">&quot;margin: 16px&quot;</span><span class="token operator">&gt;</span>
    183. 

  183.               <span class="token operator">&lt;</span>van<span class="token operator">-</span>button
    184. 

  184.                 round
    185. 

  185.                 block
    186. 

  186.                 type<span class="token operator">=</span><span class="token string">&quot;primary&quot;</span>
    187. 

  187.                 native<span class="token operator">-</span>type<span class="token operator">=</span><span class="token string">&quot;submit&quot;</span>
    188. 

  188.                 color<span class="token operator">=</span><span class="token string">&quot;linear-gradient(to right, #ff6034, #c33825)&quot;</span>
    189. 

  189.               <span class="token operator">&gt;</span>
    190. 

  190.                 完成
    191. 

  191.               <span class="token operator">&lt;</span><span class="token operator">/</span>van<span class="token operator">-</span>button<span class="token operator">&gt;</span>
    192. 

  192.             <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    193. 

  193.           <span class="token operator">&lt;</span><span class="token operator">/</span>van<span class="token operator">-</span>form<span class="token operator">&gt;</span>
    194. 

  194.         <span class="token operator">&lt;</span><span class="token operator">/</span>van<span class="token operator">-</span>action<span class="token operator">-</span>sheet<span class="token operator">&gt;</span>
    195. 

  195.       <span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
    196. 

  196.     <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    197. 

  197. 

  198.     <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 模式<span class="token number">1</span><span class="token operator">-</span>春联画布 <span class="token operator">--</span><span class="token operator">&gt;</span>
    199. 

  199.     <span class="token operator">&lt;</span>div
    200. 

  200.       v<span class="token operator">-</span>show<span class="token operator">=</span><span class="token string">&quot;mode === 1&quot;</span>
    201. 

  201.       v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">&quot;(item, index) in canvasList&quot;</span>
    202. 

  202.       <span class="token operator">:</span>key<span class="token operator">=</span><span class="token string">&quot;item.name&quot;</span>
    203. 

  203.     <span class="token operator">&gt;</span>
    204. 

  204.       <span class="token operator">&lt;</span>canvas
    205. 

  205.         <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;canvas&quot;</span>
    206. 

  206.         <span class="token operator">:</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;item.className&quot;</span>
    207. 

  207.         v<span class="token operator">-</span>show<span class="token operator">=</span><span class="token string">&quot;curCanvasIndex === index&quot;</span>
    208. 

  208.         <span class="token operator">:</span>style<span class="token operator">=</span>&quot;<span class="token punctuation">{</span>
    209. 

  209.           <span class="token literal-property property">marginTop</span><span class="token operator">:</span>
    210. 

  210.             item<span class="token punctuation">.</span>height <span class="token operator">&lt;</span> clientHeight
    211. 

  211.               <span class="token operator">?</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token punctuation">(</span>clientHeight <span class="token operator">-</span> item<span class="token punctuation">.</span>height<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">px</span><span class="token template-punctuation string">`</span></span>
    212. 

  212.               <span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
    213. 

  213.           <span class="token literal-property property">marginLeft</span><span class="token operator">:</span>
    214. 

  214.             item<span class="token punctuation">.</span>width <span class="token operator">&lt;</span> clientWidth <span class="token operator">?</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token punctuation">(</span>clientWidth <span class="token operator">-</span> item<span class="token punctuation">.</span>width<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">px</span><span class="token template-punctuation string">`</span></span> <span class="token operator">:</span> <span class="token number">0</span>
    215. 

  215.         <span class="token punctuation">}</span>&quot;
    216. 

  216.       <span class="token operator">/</span><span class="token operator">&gt;</span>
    217. 

  217.     <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    218. 

  218. 

  219.     <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 模式<span class="token number">2</span><span class="token operator">-</span>春联画布 <span class="token operator">--</span><span class="token operator">&gt;</span>
    220. 

  220.     <span class="token operator">&lt;</span>div v<span class="token operator">-</span>show<span class="token operator">=</span><span class="token string">&quot;mode === 2&quot;</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;canvas-mode-2&quot;</span><span class="token operator">&gt;</span>
    221. 

  221.       <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;row&quot;</span><span class="token operator">&gt;</span>
    222. 

  222.         <span class="token operator">&lt;</span>canvas id<span class="token operator">=</span><span class="token string">&quot;canvas-top&quot;</span> <span class="token operator">:</span>width<span class="token operator">=</span><span class="token string">&quot;200 * scale&quot;</span> <span class="token operator">:</span>height<span class="token operator">=</span><span class="token string">&quot;60 * scale&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    223. 

  223.       <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    224. 

  224.       <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;row&quot;</span><span class="token operator">&gt;</span>
    225. 

  225.         <span class="token operator">&lt;</span>canvas id<span class="token operator">=</span><span class="token string">&quot;canvas-left&quot;</span> <span class="token operator">:</span>width<span class="token operator">=</span><span class="token string">&quot;60 * scale&quot;</span> <span class="token operator">:</span>height<span class="token operator">=</span><span class="token string">&quot;364 * scale&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    226. 

  226.         <span class="token operator">&lt;</span>canvas id<span class="token operator">=</span><span class="token string">&quot;canvas-right&quot;</span> <span class="token operator">:</span>width<span class="token operator">=</span><span class="token string">&quot;60 * scale&quot;</span> <span class="token operator">:</span>height<span class="token operator">=</span><span class="token string">&quot;364 * scale&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    227. 

  227.       <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    228. 

  228.     <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    229. 

  229. 

  230.     <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 贴春联按钮 <span class="token operator">--</span><span class="token operator">&gt;</span>
    231. 

  231.     <span class="token operator">&lt;</span>Button <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;btn-posters&quot;</span> @click<span class="token operator">=</span><span class="token string">&quot;openPosters&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    232. 

  232. 

  233.     <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> footer<span class="token operator">-</span>当前对联提示 <span class="token operator">--</span><span class="token operator">&gt;</span>
    234. 

  234.     <span class="token operator">&lt;</span>footer v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;duilian.shang&quot;</span><span class="token operator">&gt;</span>
    235. 

  235.       <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;refresh-btn&quot;</span> @click<span class="token operator">=</span><span class="token string">&quot;handleRefresh(true)&quot;</span><span class="token operator">&gt;</span>
    236. 

  236.         <span class="token operator">&lt;</span>i <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;iconfont icon-shuaxin&quot;</span> <span class="token operator">:</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;{ rotate: isRotate }&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>i<span class="token operator">&gt;</span>
    237. 

  237.       <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    238. 

  238.       <span class="token operator">&lt;</span>dl <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;duilian&quot;</span><span class="token operator">&gt;</span>
    239. 

  239.         <span class="token operator">&lt;</span>dt<span class="token operator">&gt;</span>对联<span class="token operator">&lt;</span><span class="token operator">/</span>dt<span class="token operator">&gt;</span>
    240. 

  240.         <span class="token operator">&lt;</span>dd<span class="token operator">&gt;</span>
    241. 

  241.           <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span> duilian<span class="token punctuation">.</span>shang <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    242. 

  242.           <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span> duilian<span class="token punctuation">.</span>xia <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    243. 

  243.         <span class="token operator">&lt;</span><span class="token operator">/</span>dd<span class="token operator">&gt;</span>
    244. 

  244.       <span class="token operator">&lt;</span><span class="token operator">/</span>dl<span class="token operator">&gt;</span>
    245. 

  245.       <span class="token operator">&lt;</span>dl<span class="token operator">&gt;</span>
    246. 

  246.         <span class="token operator">&lt;</span>dt<span class="token operator">&gt;</span>横批<span class="token operator">&lt;</span><span class="token operator">/</span>dt<span class="token operator">&gt;</span>
    247. 

  247.         <span class="token operator">&lt;</span>dd<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span> duilian<span class="token punctuation">.</span>heng <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>dd<span class="token operator">&gt;</span>
    248. 

  248.       <span class="token operator">&lt;</span><span class="token operator">/</span>dl<span class="token operator">&gt;</span>
    249. 

  249.     <span class="token operator">&lt;</span><span class="token operator">/</span>footer<span class="token operator">&gt;</span>
    250. 

  250. 

  251.     <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 分享按钮 <span class="token operator">--</span><span class="token operator">&gt;</span>
    252. 

  252.     <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;share-btn&quot;</span> v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;isShowShareBtn&quot;</span> @click<span class="token operator">=</span><span class="token string">&quot;isShowShareTip = true&quot;</span><span class="token operator">&gt;</span>
    253. 

  253.       <span class="token operator">&lt;</span>i <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;iconfont icon-fenxiang&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>i<span class="token operator">&gt;</span>
    254. 

  254.     <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    255. 

  255.     <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 微信分享提示语 <span class="token operator">--</span><span class="token operator">&gt;</span>
    256. 

  256.     <span class="token operator">&lt;</span>div
    257. 

  257.       <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;share-tip&quot;</span>
    258. 

  258.       v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;isShowShareTip&quot;</span>
    259. 

  259.       @click<span class="token operator">=</span><span class="token string">&quot;isShowShareTip = false&quot;</span>
    260. 

  260.     <span class="token operator">&gt;</span>
    261. 

  261.       点击右上角把这个工具分享给朋友
    262. 

  262.       <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;hand&quot;</span><span class="token operator">&gt;</span>👆<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    263. 

  263.     <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    264. 

  264. 

  265.     <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 保存tip <span class="token operator">--</span><span class="token operator">&gt;</span>
    266. 

  266.     <span class="token operator">&lt;</span>p v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;isShowTip&quot;</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;download-tip&quot;</span><span class="token operator">&gt;</span><span class="token operator">*</span>长按图片保存或转发<span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
    267. 

  267. 

  268.     <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 版权 <span class="token operator">--</span><span class="token operator">&gt;</span>
    269. 

  269.     <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;copyright&quot;</span><span class="token operator">&gt;</span>公众号「有趣研究社」 ©版权所有<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    270. 

  270. 

  271.     <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 载入图片元素，用于快速贴图使用<span class="token punctuation">,</span> 注意设置crossorigin<span class="token operator">=</span><span class="token string">&quot;anonymous&quot;</span>解决跨域 <span class="token operator">--</span><span class="token operator">&gt;</span>
    272. 

  272.     <span class="token operator">&lt;</span>div v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;isReadImages&quot;</span><span class="token operator">&gt;</span>
    273. 

  273.       <span class="token operator">&lt;</span>img
    274. 

  274.         crossorigin<span class="token operator">=</span><span class="token string">&quot;anonymous&quot;</span>
    275. 

  275.         v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">&quot;(item, index) in bgList&quot;</span>
    276. 

  276.         <span class="token operator">:</span>src<span class="token operator">=</span><span class="token string">&quot;item&quot;</span>
    277. 

  277.         <span class="token operator">:</span>key<span class="token operator">=</span><span class="token string">&quot;item&quot;</span>
    278. 

  278.         <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;hide-img&quot;</span>
    279. 

  279.         <span class="token operator">:</span>id<span class="token operator">=</span><span class="token string">&quot;`bg-img-` + index&quot;</span>
    280. 

  280.       <span class="token operator">/</span><span class="token operator">&gt;</span>
    281. 

  281.       <span class="token operator">&lt;</span>img
    282. 

  282.         crossorigin<span class="token operator">=</span><span class="token string">&quot;anonymous&quot;</span>
    283. 

  283.         <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;hide-img&quot;</span>
    284. 

  284.         id<span class="token operator">=</span><span class="token string">&quot;qrcode&quot;</span>
    285. 

  285.         src<span class="token operator">=</span><span class="token string">&quot;https://cdn.jsdelivr.net/gh/xugaoyi/image_store2@master/img/qrcode.zul0pldsuao.png&quot;</span>
    286. 

  286.       <span class="token operator">/</span><span class="token operator">&gt;</span>
    287. 

  287.     <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    288. 

  288. 

  289.     <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 背景音乐 <span class="token operator">--</span><span class="token operator">&gt;</span>
    290. 

  290.     <span class="token operator">&lt;</span>audio
    291. 

  291.       src<span class="token operator">=</span><span class="token string">&quot;https://cdn.jsdelivr.net/gh/xugaoyi/image_store2@master/cjxq.mp3&quot;</span>
    292. 

  292.       id<span class="token operator">=</span><span class="token string">&quot;bgm&quot;</span>
    293. 

  293.       ref<span class="token operator">=</span><span class="token string">&quot;bgm&quot;</span>
    294. 

  294.       loop
    295. 

  295.     <span class="token operator">/</span><span class="token operator">&gt;</span>
    296. 

  296.     <span class="token operator">&lt;</span>div
    297. 

  297.       <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;play-btn&quot;</span>
    298. 

  298.       <span class="token operator">:</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;{ paused: !isPlay }&quot;</span>
    299. 

  299.       ref<span class="token operator">=</span><span class="token string">&quot;playBtn&quot;</span>
    300. 

  300.       @click<span class="token operator">=</span><span class="token string">&quot;handlePlay&quot;</span>
    301. 

  301.     <span class="token operator">&gt;</span>
    302. 

  302.       <span class="token operator">&lt;</span>i <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;iconfont icon-yinle&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>i<span class="token operator">&gt;</span>
    303. 

  303.     <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    304. 

  304.   <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    305. 

  305. 

  306.   <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;body-bg-img&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    307. 

  307. <span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
    308. 

  308. 

  309. <span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
    310. 

  310. <span class="token keyword">import</span> <span class="token punctuation">{</span> ImagePreview<span class="token punctuation">,</span> Notify <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vant'</span>
    311. 

  311. <span class="token keyword">import</span> <span class="token punctuation">{</span> isWX<span class="token punctuation">,</span> isMobile <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/utils'</span>
    312. 

  312. <span class="token keyword">import</span> Button <span class="token keyword">from</span> <span class="token string">'@/components/Button.vue'</span>
    313. 

  313. <span class="token keyword">import</span> dl <span class="token keyword">from</span> <span class="token string">'@/assets/img/yh/dl.jpeg'</span>
    314. 

  314. <span class="token keyword">import</span> hp <span class="token keyword">from</span> <span class="token string">'@/assets/img/yh/hp.jpeg'</span>
    315. 

  315. <span class="token keyword">import</span> fz <span class="token keyword">from</span> <span class="token string">'@/assets/img/yh/fz.png'</span>
    316. 

  316. 

  317. <span class="token comment">// 对联数据</span>
    318. 

  318. <span class="token keyword">import</span> duilianList <span class="token keyword">from</span> <span class="token string">'@/mock/duilian'</span>
    319. 

  319. 

  320. <span class="token keyword">const</span> <span class="token constant">PROPORTION</span> <span class="token operator">=</span> <span class="token number">0.37</span> <span class="token comment">// 图片缩小比例</span>
    321. 

  321. <span class="token keyword">const</span> <span class="token constant">INSTANTIATE_NAME</span> <span class="token operator">=</span> <span class="token string">'signature'</span> <span class="token comment">// 实例名称</span>
    322. 

  322. <span class="token keyword">const</span> <span class="token constant">MIN_WIDTH</span> <span class="token operator">=</span> <span class="token number">3</span> <span class="token comment">// 画笔最小宽</span>
    323. 

  323. <span class="token keyword">const</span> <span class="token constant">MAX_WIDTH</span> <span class="token operator">=</span> <span class="token number">12</span> <span class="token comment">// 画笔最大宽</span>
    324. 

  324. 

  325. <span class="token comment">// 海报背景图大小</span>
    326. 

  326. <span class="token keyword">const</span> <span class="token constant">BG_WIDTH</span> <span class="token operator">=</span> <span class="token number">750</span>
    327. 

  327. <span class="token keyword">const</span> <span class="token constant">BG_HEIGHT</span> <span class="token operator">=</span> <span class="token number">1448</span>
    328. 

  328. 

  329. <span class="token comment">// 贴图定位和大小</span>
    330. 

  330. <span class="token keyword">const</span> <span class="token constant">POSITION</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
    331. 

  331.   <span class="token punctuation">{</span> <span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token number">57</span><span class="token punctuation">,</span> <span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token number">510</span><span class="token punctuation">,</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">90</span><span class="token punctuation">,</span> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">546</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 上联</span>
    332. 

  332.   <span class="token punctuation">{</span> <span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token number">600</span><span class="token punctuation">,</span> <span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token number">510</span><span class="token punctuation">,</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">90</span><span class="token punctuation">,</span> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">546</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 下联</span>
    333. 

  333.   <span class="token punctuation">{</span> <span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token number">225</span><span class="token punctuation">,</span> <span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token number">345</span><span class="token punctuation">,</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">300</span><span class="token punctuation">,</span> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">90</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 横幅</span>
    334. 

  334.   <span class="token punctuation">{</span> <span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token number">460</span><span class="token punctuation">,</span> <span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token number">450</span><span class="token punctuation">,</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">130</span><span class="token punctuation">,</span> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">130</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 福字</span>
    335. 

  335. <span class="token punctuation">]</span>
    336. 

  336. 

  337. <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    338. 

  338.   <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;Home&quot;</span><span class="token punctuation">,</span>
    339. 

  339.   <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    340. 

  340.     Button
    341. 

  341.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    342. 

  342.   <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    343. 

  343.     <span class="token keyword">return</span> <span class="token punctuation">{</span>
    344. 

  344.       duilianList<span class="token punctuation">,</span>
    345. 

  345.       <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token function">Number</span><span class="token punctuation">(</span>localStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">'mode'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">// 1 手写，2 生成</span>
    346. 

  346.       <span class="token literal-property property">curCanvasIndex</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// 显示哪个画布</span>
    347. 

  347.       <span class="token literal-property property">progress</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token comment">// 画笔大小的刻度</span>
    348. 

  348.       <span class="token literal-property property">clientWidth</span><span class="token operator">:</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientWidth<span class="token punctuation">,</span>
    349. 

  349.       <span class="token literal-property property">clientHeight</span><span class="token operator">:</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientHeight<span class="token punctuation">,</span>
    350. 

  350.       <span class="token literal-property property">canvasList</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    351. 

  351.         <span class="token punctuation">{</span>
    352. 

  352.           <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'上联'</span><span class="token punctuation">,</span>
    353. 

  353.           <span class="token literal-property property">className</span><span class="token operator">:</span> <span class="token string">'canvas-a'</span><span class="token punctuation">,</span>
    354. 

  354.           <span class="token literal-property property">bgImage</span><span class="token operator">:</span> dl<span class="token punctuation">,</span>
    355. 

  355.           <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">600</span> <span class="token operator">*</span> <span class="token constant">PROPORTION</span><span class="token punctuation">,</span>
    356. 

  356.           <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">3640</span> <span class="token operator">*</span> <span class="token constant">PROPORTION</span><span class="token punctuation">,</span>
    357. 

  357.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    358. 

  358.         <span class="token punctuation">{</span>
    359. 

  359.           <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'下联'</span><span class="token punctuation">,</span>
    360. 

  360.           <span class="token literal-property property">className</span><span class="token operator">:</span> <span class="token string">'canvas-b'</span><span class="token punctuation">,</span>
    361. 

  361.           <span class="token literal-property property">bgImage</span><span class="token operator">:</span> dl<span class="token punctuation">,</span>
    362. 

  362.           <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">600</span> <span class="token operator">*</span> <span class="token constant">PROPORTION</span><span class="token punctuation">,</span>
    363. 

  363.           <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">3640</span> <span class="token operator">*</span> <span class="token constant">PROPORTION</span><span class="token punctuation">,</span>
    364. 

  364.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    365. 

  365.         <span class="token punctuation">{</span>
    366. 

  366.           <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'横批'</span><span class="token punctuation">,</span>
    367. 

  367.           <span class="token literal-property property">className</span><span class="token operator">:</span> <span class="token string">'canvas-c'</span><span class="token punctuation">,</span>
    368. 

  368.           <span class="token literal-property property">bgImage</span><span class="token operator">:</span> hp<span class="token punctuation">,</span>
    369. 

  369.           <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">2000</span> <span class="token operator">*</span> <span class="token constant">PROPORTION</span><span class="token punctuation">,</span>
    370. 

  370.           <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">600</span> <span class="token operator">*</span> <span class="token constant">PROPORTION</span><span class="token punctuation">,</span>
    371. 

  371.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    372. 

  372.         <span class="token punctuation">{</span>
    373. 

  373.           <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'福字'</span><span class="token punctuation">,</span>
    374. 

  374.           <span class="token literal-property property">className</span><span class="token operator">:</span> <span class="token string">'canvas-d'</span><span class="token punctuation">,</span>
    375. 

  375.           <span class="token literal-property property">bgImage</span><span class="token operator">:</span> fz<span class="token punctuation">,</span>
    376. 

  376.           <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">366</span><span class="token punctuation">,</span>
    377. 

  377.           <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">366</span><span class="token punctuation">,</span>
    378. 

  378.         <span class="token punctuation">}</span>
    379. 

  379.       <span class="token punctuation">]</span><span class="token punctuation">,</span>
    380. 

  380.       <span class="token literal-property property">colorList</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'#000000'</span><span class="token punctuation">,</span> <span class="token string">'#ffd800'</span><span class="token punctuation">,</span> <span class="token string">'#e8bd48'</span><span class="token punctuation">,</span> <span class="token string">'#ddc08c'</span><span class="token punctuation">,</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    381. 

  381.       <span class="token literal-property property">curColorIndex</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
    382. 

  382.       <span class="token literal-property property">colorListVisibility</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 画布颜色选择列表可见性</span>
    383. 

  383.       <span class="token literal-property property">isShowTip</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 是否显示底部提示语</span>
    384. 

  384.       <span class="token literal-property property">duilian</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 当前对联文本对象</span>
    385. 

  385.       <span class="token literal-property property">isRotate</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 刷新icon旋转</span>
    386. 

  386.       <span class="token literal-property property">bgList</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    387. 

  387.         <span class="token string">'https://cdn.jsdelivr.net/gh/xugaoyi/image_store@master/1.4j8qpdnq80i0.jpeg'</span><span class="token punctuation">,</span>
    388. 

  388.         <span class="token string">'https://cdn.jsdelivr.net/gh/xugaoyi/image_store@master/4.4460an8ag5o0.jpeg'</span><span class="token punctuation">,</span>
    389. 

  389.         <span class="token string">'https://cdn.jsdelivr.net/gh/xugaoyi/image_store@master/5.3axtl4xpvy00.jpeg'</span><span class="token punctuation">,</span>
    390. 

  390.         <span class="token string">'https://cdn.jsdelivr.net/gh/xugaoyi/image_store@master/6.2lnbphdqjaq0.jpeg'</span><span class="token punctuation">,</span>
    391. 

  391.       <span class="token punctuation">]</span><span class="token punctuation">,</span>
    392. 

  392.       <span class="token literal-property property">isReadImages</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 延迟加载图片用</span>
    393. 

  393.       <span class="token literal-property property">isShowShareBtn</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 是否显示分享按钮</span>
    394. 

  394.       <span class="token literal-property property">isShowShareTip</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 是否显示分享提示语</span>
    395. 

  395.       <span class="token literal-property property">isPlay</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 是否在播放</span>
    396. 

  396. 

  397.       <span class="token comment">// 模式2</span>
    398. 

  398.       <span class="token literal-property property">canvasTop</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token comment">// 横批</span>
    399. 

  399.       <span class="token literal-property property">canvasLeft</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token comment">// 上联</span>
    400. 

  400.       <span class="token literal-property property">canvasRight</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token comment">// 下联</span>
    401. 

  401.       <span class="token literal-property property">imgObj1</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token comment">// 横批图片对象</span>
    402. 

  402.       <span class="token literal-property property">imgObj2</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token comment">// 上下联图片对象</span>
    403. 

  403.       <span class="token literal-property property">scale</span><span class="token operator">:</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>devicePixelRatio <span class="token operator">||</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 用于增加画布清晰度</span>
    404. 

  404.       <span class="token literal-property property">showPickBox</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 挑选对联的弹框</span>
    405. 

  405.       <span class="token literal-property property">showInputBox</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 输入对联的弹框</span>
    406. 

  406.       <span class="token literal-property property">shanglian</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// 输入的上联</span>
    407. 

  407.       <span class="token literal-property property">xialian</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// 输入的下联</span>
    408. 

  408.       <span class="token literal-property property">hengpi</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// 输入的横批</span>
    409. 

  409.     <span class="token punctuation">}</span><span class="token punctuation">;</span>
    410. 

  410.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    411. 

  411.   <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    412. 

  412.     <span class="token comment">// 模式1-当前画布实例</span>
    413. 

  413.     <span class="token function">curCanvasInstantiate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    414. 

  414.       <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">[</span><span class="token constant">INSTANTIATE_NAME</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>curCanvasIndex<span class="token punctuation">]</span>
    415. 

  415.     <span class="token punctuation">}</span>
    416. 

  416.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    417. 

  417.   <span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    418. 

  418.     <span class="token comment">// 微信浏览器显示分享按钮</span>
    419. 

  419.     <span class="token keyword">this</span><span class="token punctuation">.</span>isShowShareBtn <span class="token operator">=</span> <span class="token function">isWX</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    420. 

  420.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    421. 

  421.   <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    422. 

  422.     <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">isMobile</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    423. 

  423.       <span class="token function">Notify</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'warning'</span><span class="token punctuation">,</span> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'请用移动端打开获得最佳体验'</span><span class="token punctuation">,</span> <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token number">6000</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    424. 

  424.     <span class="token punctuation">}</span>
    425. 

  425. 

  426.     <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">initMode1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    427. 

  427. 

  428.     <span class="token comment">// 初始化对联提示</span>
    429. 

  429.     <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleRefresh</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    430. 

  430. 

  431.     <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">initMode2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    432. 

  432. 

  433.     <span class="token comment">// 按钮添加激活时发光效果class</span>
    434. 

  434.     <span class="token keyword">const</span> btnEl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'.btn,.btn-block'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    435. 

  435.     btnEl<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    436. 

  436.       item<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'touchstart'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    437. 

  437.         item<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'btn-active'</span><span class="token punctuation">)</span>
    438. 

  438.       <span class="token punctuation">}</span><span class="token punctuation">)</span>
    439. 

  439.       item<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'touchend'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    440. 

  440.         <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    441. 

  441.           item<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'btn-active'</span><span class="token punctuation">)</span>
    442. 

  442.         <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
    443. 

  443.       <span class="token punctuation">}</span><span class="token punctuation">)</span>
    444. 

  444.     <span class="token punctuation">}</span><span class="token punctuation">)</span>
    445. 

  445. 

  446.     <span class="token comment">// 延迟加载贴图背景</span>
    447. 

  447.     <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    448. 

  448.       <span class="token keyword">this</span><span class="token punctuation">.</span>isReadImages <span class="token operator">=</span> <span class="token boolean">true</span>
    449. 

  449.     <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
    450. 

  450.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    451. 

  451. 

  452.   <span class="token literal-property property">watch</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    453. 

  453.     <span class="token comment">// 切换画笔颜色</span>
    454. 

  454.     <span class="token function">curColorIndex</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    455. 

  455.       <span class="token keyword">this</span><span class="token punctuation">.</span>curCanvasInstantiate<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>colorList<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>curColorIndex<span class="token punctuation">]</span>
    456. 

  456.       <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>mode <span class="token operator">===</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    457. 

  457.         <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">refreshDuilian</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    458. 

  458.       <span class="token punctuation">}</span>
    459. 

  459.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    460. 

  460.     <span class="token comment">// 切换画布时应用当前画笔颜色和大小</span>
    461. 

  461.     <span class="token function">curCanvasIndex</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    462. 

  462.       <span class="token keyword">this</span><span class="token punctuation">.</span>curCanvasInstantiate<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>colorList<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>curColorIndex<span class="token punctuation">]</span>
    463. 

  463.       <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleChangeSize</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    464. 

  464.       window<span class="token punctuation">.</span><span class="token function">scrollTo</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span>
    465. 

  465.     <span class="token punctuation">}</span>
    466. 

  466.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    467. 

  467. 

  468.   <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    469. 

  469.     <span class="token function">initMode1</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    470. 

  470.       <span class="token keyword">const</span> <span class="token punctuation">{</span> colorList<span class="token punctuation">,</span> curColorIndex <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span>
    471. 

  471.       <span class="token keyword">this</span><span class="token punctuation">.</span>canvasList<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    472. 

  472.         <span class="token keyword">const</span> options <span class="token operator">=</span> <span class="token punctuation">{</span>
    473. 

  473.           <span class="token literal-property property">width</span><span class="token operator">:</span> item<span class="token punctuation">.</span>width<span class="token punctuation">,</span>
    474. 

  474.           <span class="token literal-property property">height</span><span class="token operator">:</span> item<span class="token punctuation">.</span>height<span class="token punctuation">,</span>
    475. 

  475.           <span class="token literal-property property">minWidth</span><span class="token operator">:</span> <span class="token constant">MIN_WIDTH</span><span class="token punctuation">,</span> <span class="token comment">// 画笔最小宽度(px)</span>
    476. 

  476.           <span class="token literal-property property">maxWidth</span><span class="token operator">:</span> <span class="token constant">MAX_WIDTH</span><span class="token punctuation">,</span> <span class="token comment">// 画笔最大宽度</span>
    477. 

  477.           <span class="token literal-property property">minSpeed</span><span class="token operator">:</span> <span class="token number">1.8</span><span class="token punctuation">,</span> <span class="token comment">// 画笔达到最小宽度所需最小速度(px/ms)，取值范围1.0-10.0</span>
    478. 

  478.           <span class="token literal-property property">color</span><span class="token operator">:</span> colorList<span class="token punctuation">[</span>curColorIndex<span class="token punctuation">]</span><span class="token punctuation">,</span>
    479. 

  479.           <span class="token comment">// 新增的配置</span>
    480. 

  480.           <span class="token literal-property property">bgImage</span><span class="token operator">:</span> item<span class="token punctuation">.</span>bgImage<span class="token punctuation">,</span>
    481. 

  481.         <span class="token punctuation">}</span><span class="token punctuation">;</span>
    482. 

  482. 

  483.         <span class="token keyword">this</span><span class="token punctuation">[</span><span class="token constant">INSTANTIATE_NAME</span> <span class="token operator">+</span> index<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">SmoothSignature</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.'</span> <span class="token operator">+</span> item<span class="token punctuation">.</span>className<span class="token punctuation">)</span><span class="token punctuation">,</span> options<span class="token punctuation">)</span><span class="token punctuation">;</span>
    484. 

  484.       <span class="token punctuation">}</span><span class="token punctuation">)</span>
    485. 

  485.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    486. 

  486. 

  487.     <span class="token function">initMode2</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    488. 

  488.       <span class="token keyword">this</span><span class="token punctuation">.</span>canvasTop <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'canvas-top'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">'2d'</span><span class="token punctuation">)</span>
    489. 

  489.       <span class="token keyword">this</span><span class="token punctuation">.</span>canvasLeft <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'canvas-left'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">'2d'</span><span class="token punctuation">)</span>
    490. 

  490.       <span class="token keyword">this</span><span class="token punctuation">.</span>canvasRight <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'canvas-right'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">'2d'</span><span class="token punctuation">)</span>
    491. 

  491. 

  492.       <span class="token comment">// 设字体样式</span>
    493. 

  493.       <span class="token keyword">const</span> font <span class="token operator">=</span> <span class="token string">&quot;36px xs, cursive&quot;</span>
    494. 

  494.       <span class="token keyword">this</span><span class="token punctuation">.</span>canvasTop<span class="token punctuation">.</span>font <span class="token operator">=</span> font
    495. 

  495.       <span class="token keyword">this</span><span class="token punctuation">.</span>canvasLeft<span class="token punctuation">.</span>font <span class="token operator">=</span> font
    496. 

  496.       <span class="token keyword">this</span><span class="token punctuation">.</span>canvasRight<span class="token punctuation">.</span>font <span class="token operator">=</span> font
    497. 

  497. 

  498.       <span class="token comment">// 增强清晰度</span>
    499. 

  499.       <span class="token keyword">const</span> <span class="token punctuation">{</span> scale <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span>
    500. 

  500.       <span class="token keyword">this</span><span class="token punctuation">.</span>canvasTop<span class="token punctuation">.</span><span class="token function">scale</span><span class="token punctuation">(</span>scale<span class="token punctuation">,</span> scale<span class="token punctuation">)</span><span class="token punctuation">;</span>
    501. 

  501.       <span class="token keyword">this</span><span class="token punctuation">.</span>canvasLeft<span class="token punctuation">.</span><span class="token function">scale</span><span class="token punctuation">(</span>scale<span class="token punctuation">,</span> scale<span class="token punctuation">)</span><span class="token punctuation">;</span>
    502. 

  502.       <span class="token keyword">this</span><span class="token punctuation">.</span>canvasRight<span class="token punctuation">.</span><span class="token function">scale</span><span class="token punctuation">(</span>scale<span class="token punctuation">,</span> scale<span class="token punctuation">)</span><span class="token punctuation">;</span>
    503. 

  503. 

  504.       <span class="token comment">// 设背景图</span>
    505. 

  505.       <span class="token keyword">this</span><span class="token punctuation">.</span>imgObj1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Image</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    506. 

  506.       <span class="token keyword">this</span><span class="token punctuation">.</span>imgObj2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Image</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    507. 

  507.       <span class="token keyword">this</span><span class="token punctuation">.</span>imgObj1<span class="token punctuation">.</span>src <span class="token operator">=</span> hp
    508. 

  508.       <span class="token keyword">this</span><span class="token punctuation">.</span>imgObj2<span class="token punctuation">.</span>src <span class="token operator">=</span> dl
    509. 

  509.       <span class="token keyword">this</span><span class="token punctuation">.</span>imgObj1<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    510. 

  510.         <span class="token comment">// 贴背景</span>
    511. 

  511.         <span class="token keyword">this</span><span class="token punctuation">.</span>canvasTop<span class="token punctuation">.</span><span class="token function">drawImage</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>imgObj1<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">,</span> <span class="token number">60</span><span class="token punctuation">)</span>
    512. 

  512. 

  513.         <span class="token comment">// 字体加载完成后</span>
    514. 

  514.         document<span class="token punctuation">.</span>fonts<span class="token punctuation">.</span>ready<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    515. 

  515.           <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleTopFillText</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    516. 

  516.         <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    517. 

  517.       <span class="token punctuation">}</span>
    518. 

  518.       <span class="token keyword">this</span><span class="token punctuation">.</span>imgObj2<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    519. 

  519.         <span class="token comment">// 贴背景</span>
    520. 

  520.         <span class="token keyword">this</span><span class="token punctuation">.</span>canvasLeft<span class="token punctuation">.</span><span class="token function">drawImage</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>imgObj2<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">60</span><span class="token punctuation">,</span> <span class="token number">364</span><span class="token punctuation">)</span>
    521. 

  521.         <span class="token keyword">this</span><span class="token punctuation">.</span>canvasRight<span class="token punctuation">.</span><span class="token function">drawImage</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>imgObj2<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">60</span><span class="token punctuation">,</span> <span class="token number">364</span><span class="token punctuation">)</span>
    522. 

  522. 

  523.         <span class="token comment">// 字体加载完成后</span>
    524. 

  524.         document<span class="token punctuation">.</span>fonts<span class="token punctuation">.</span>ready<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    525. 

  525.           <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleLRFillText</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>canvasLeft<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>duilian<span class="token punctuation">.</span>shang<span class="token punctuation">)</span>
    526. 

  526.           <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleLRFillText</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>canvasRight<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>duilian<span class="token punctuation">.</span>xia<span class="token punctuation">)</span>
    527. 

  527.         <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    528. 

  528.       <span class="token punctuation">}</span>
    529. 

  529.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    530. 

  530. 

  531.     <span class="token comment">// 模式2-刷新对联</span>
    532. 

  532.     <span class="token function">refreshDuilian</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    533. 

  533.       <span class="token keyword">this</span><span class="token punctuation">.</span>canvasTop<span class="token punctuation">.</span><span class="token function">drawImage</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>imgObj1<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">,</span> <span class="token number">60</span><span class="token punctuation">)</span>
    534. 

  534.       <span class="token keyword">this</span><span class="token punctuation">.</span>canvasLeft<span class="token punctuation">.</span><span class="token function">drawImage</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>imgObj2<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">60</span><span class="token punctuation">,</span> <span class="token number">364</span><span class="token punctuation">)</span>
    535. 

  535.       <span class="token keyword">this</span><span class="token punctuation">.</span>canvasRight<span class="token punctuation">.</span><span class="token function">drawImage</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>imgObj2<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">60</span><span class="token punctuation">,</span> <span class="token number">364</span><span class="token punctuation">)</span>
    536. 

  536.       <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleTopFillText</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    537. 

  537.       <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleLRFillText</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>canvasLeft<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>duilian<span class="token punctuation">.</span>shang<span class="token punctuation">)</span>
    538. 

  538.       <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleLRFillText</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>canvasRight<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>duilian<span class="token punctuation">.</span>xia<span class="token punctuation">)</span>
    539. 

  539.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    540. 

  540. 

  541.     <span class="token comment">// 模式2-贴横批</span>
    542. 

  542.     <span class="token function">handleTopFillText</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    543. 

  543.       <span class="token comment">// 贴文本</span>
    544. 

  544.       <span class="token keyword">this</span><span class="token punctuation">.</span>canvasTop<span class="token punctuation">.</span>fillStyle <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>colorList<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>curColorIndex<span class="token punctuation">]</span>
    545. 

  545.       <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>duilian<span class="token punctuation">.</span>heng<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    546. 

  546.         <span class="token keyword">this</span><span class="token punctuation">.</span>duilian<span class="token punctuation">.</span>heng<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    547. 

  547.           <span class="token keyword">const</span> left <span class="token operator">=</span> <span class="token number">42</span> <span class="token operator">*</span> <span class="token punctuation">(</span>index <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">22</span>
    548. 

  548.           <span class="token keyword">this</span><span class="token punctuation">.</span>canvasTop<span class="token punctuation">.</span><span class="token function">fillText</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> left<span class="token punctuation">,</span> <span class="token number">40</span><span class="token punctuation">)</span>
    549. 

  549.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    550. 

  550.       <span class="token punctuation">}</span>
    551. 

  551.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    552. 

  552. 

  553.     <span class="token comment">// 模式2-贴上下联</span>
    554. 

  554.     <span class="token function">handleLRFillText</span><span class="token punctuation">(</span><span class="token parameter">ctx<span class="token punctuation">,</span> text</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    555. 

  555.       ctx<span class="token punctuation">.</span>fillStyle <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>colorList<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>curColorIndex<span class="token punctuation">]</span>
    556. 

  556.       <span class="token keyword">if</span> <span class="token punctuation">(</span>text<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    557. 

  557.         text<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    558. 

  558.           <span class="token keyword">const</span> top <span class="token operator">=</span> <span class="token number">50</span> <span class="token operator">*</span> <span class="token punctuation">(</span>index <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">8</span>
    559. 

  559.           ctx<span class="token punctuation">.</span><span class="token function">fillText</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> <span class="token number">13</span><span class="token punctuation">,</span> top<span class="token punctuation">)</span>
    560. 

  560.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    561. 

  561.       <span class="token punctuation">}</span>
    562. 

  562.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    563. 

  563. 

  564.     <span class="token comment">// 切换模式</span>
    565. 

  565.     <span class="token function">toggleMode</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    566. 

  566.       <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>mode <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    567. 

  567.         <span class="token keyword">this</span><span class="token punctuation">.</span>mode <span class="token operator">=</span> <span class="token number">2</span>
    568. 

  568.         <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">refreshDuilian</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    569. 

  569.       <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    570. 

  570.         <span class="token keyword">this</span><span class="token punctuation">.</span>mode <span class="token operator">=</span> <span class="token number">1</span>
    571. 

  571.       <span class="token punctuation">}</span>
    572. 

  572.       localStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">'mode'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>mode<span class="token punctuation">)</span><span class="token punctuation">;</span>
    573. 

  573.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    574. 

  574. 

  575.     <span class="token comment">// 打开调色板</span>
    576. 

  576.     <span class="token function">togglePalette</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    577. 

  577.       <span class="token keyword">this</span><span class="token punctuation">.</span>colorListVisibility <span class="token operator">=</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>colorListVisibility
    578. 

  578.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    579. 

  579. 

  580.     <span class="token comment">// 关闭调色板</span>
    581. 

  581.     <span class="token function">handleTouchstart</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    582. 

  582.       <span class="token comment">// 不是点击选择颜色时</span>
    583. 

  583.       <span class="token keyword">if</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>path<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token operator">?.</span>classList<span class="token operator">?.</span>value <span class="token operator">!==</span> <span class="token string">'colorList'</span> <span class="token operator">&amp;&amp;</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>classList<span class="token operator">?.</span>value <span class="token operator">!==</span> <span class="token string">'cur-color'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    584. 

  584.         <span class="token keyword">this</span><span class="token punctuation">.</span>colorListVisibility <span class="token operator">=</span> <span class="token boolean">false</span>
    585. 

  585.       <span class="token punctuation">}</span>
    586. 

  586.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    587. 

  587. 

  588.     <span class="token comment">// 选择颜色</span>
    589. 

  589.     <span class="token function">selectColor</span><span class="token punctuation">(</span><span class="token parameter">index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    590. 

  590.       <span class="token keyword">this</span><span class="token punctuation">.</span>curColorIndex <span class="token operator">=</span> index
    591. 

  591.       <span class="token keyword">this</span><span class="token punctuation">.</span>colorListVisibility <span class="token operator">=</span> <span class="token boolean">false</span>
    592. 

  592.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    593. 

  593. 

  594.     <span class="token comment">// 切换画布</span>
    595. 

  595.     <span class="token function">changeCanvas</span><span class="token punctuation">(</span><span class="token parameter">index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    596. 

  596.       <span class="token keyword">this</span><span class="token punctuation">.</span>curCanvasIndex <span class="token operator">=</span> index
    597. 

  597.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    598. 

  598. 

  599.     <span class="token comment">// 清空画布</span>
    600. 

  600.     <span class="token function">handleClear</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    601. 

  601.       <span class="token keyword">this</span><span class="token punctuation">.</span>curCanvasInstantiate<span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    602. 

  602.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    603. 

  603. 

  604.     <span class="token comment">// 撤销笔画</span>
    605. 

  605.     <span class="token function">handleUndo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    606. 

  606.       <span class="token keyword">this</span><span class="token punctuation">.</span>curCanvasInstantiate<span class="token punctuation">.</span><span class="token function">undo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    607. 

  607.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    608. 

  608. 

  609.     <span class="token comment">// 预览</span>
    610. 

  610.     <span class="token function">handlePreview</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    611. 

  611.       <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">showTopTip</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    612. 

  612.       <span class="token keyword">this</span><span class="token punctuation">.</span>isShowTip <span class="token operator">=</span> <span class="token boolean">true</span>
    613. 

  613.       <span class="token keyword">const</span> _this <span class="token operator">=</span> <span class="token keyword">this</span>
    614. 

  614.       <span class="token function">ImagePreview</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    615. 

  615.         <span class="token literal-property property">images</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getImageList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    616. 

  616.         <span class="token literal-property property">closeable</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    617. 

  617.         <span class="token literal-property property">startPosition</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>curCanvasIndex<span class="token punctuation">,</span>
    618. 

  618.         <span class="token function">onClose</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    619. 

  619.           _this<span class="token punctuation">.</span>isShowTip <span class="token operator">=</span> <span class="token boolean">false</span>
    620. 

  620.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    621. 

  621.       <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    622. 

  622.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    623. 

  623. 

  624.     <span class="token comment">// 打开海报预览</span>
    625. 

  625.     <span class="token function">openPosters</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    626. 

  626.       <span class="token comment">// 创建画布</span>
    627. 

  627.       <span class="token keyword">const</span> canvas <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'canvas'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    628. 

  628.       canvas<span class="token punctuation">.</span>width <span class="token operator">=</span> <span class="token constant">BG_WIDTH</span>
    629. 

  629.       canvas<span class="token punctuation">.</span>height <span class="token operator">=</span> <span class="token constant">BG_HEIGHT</span>
    630. 

  630.       <span class="token keyword">const</span> ctx <span class="token operator">=</span> canvas<span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">'2d'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    631. 

  631.       <span class="token keyword">const</span> resultImageList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    632. 

  632. 

  633.       <span class="token comment">// 是否隐藏福字</span>
    634. 

  634.       <span class="token keyword">const</span> isHideFu <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">[</span><span class="token constant">INSTANTIATE_NAME</span> <span class="token operator">+</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">isEmpty</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    635. 

  635.       <span class="token keyword">this</span><span class="token punctuation">.</span>bgList<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    636. 

  636.         <span class="token comment">// 贴背景图</span>
    637. 

  637.         ctx<span class="token punctuation">.</span><span class="token function">drawImage</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'bg-img-'</span> <span class="token operator">+</span> index<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token constant">BG_WIDTH</span><span class="token punctuation">,</span> <span class="token constant">BG_HEIGHT</span><span class="token punctuation">)</span>
    638. 

  638. 

  639.         <span class="token comment">// 贴对联</span>
    640. 

  640.         <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>mode <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    641. 

  641.           <span class="token keyword">this</span><span class="token punctuation">.</span>canvasList<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    642. 

  642.             <span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">===</span> <span class="token number">3</span> <span class="token operator">&amp;&amp;</span> isHideFu<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
    643. 

  643.             <span class="token keyword">const</span> dlCanvas <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.'</span> <span class="token operator">+</span> item<span class="token punctuation">.</span>className<span class="token punctuation">)</span>
    644. 

  644.             <span class="token keyword">const</span> <span class="token punctuation">{</span> left<span class="token punctuation">,</span> top<span class="token punctuation">,</span> width<span class="token punctuation">,</span> height <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token constant">POSITION</span><span class="token punctuation">[</span>index<span class="token punctuation">]</span>
    645. 

  645.             ctx<span class="token punctuation">.</span><span class="token function">drawImage</span><span class="token punctuation">(</span>dlCanvas<span class="token punctuation">,</span> left<span class="token punctuation">,</span> top<span class="token punctuation">,</span> width<span class="token punctuation">,</span> height<span class="token punctuation">)</span>
    646. 

  646.           <span class="token punctuation">}</span><span class="token punctuation">)</span>
    647. 

  647.         <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    648. 

  648.           <span class="token punctuation">[</span><span class="token string">'canvas-left'</span><span class="token punctuation">,</span> <span class="token string">'canvas-right'</span><span class="token punctuation">,</span> <span class="token string">'canvas-top'</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    649. 

  649.             <span class="token keyword">const</span> dlCanvas <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span>
    650. 

  650.             <span class="token keyword">const</span> <span class="token punctuation">{</span> left<span class="token punctuation">,</span> top<span class="token punctuation">,</span> width<span class="token punctuation">,</span> height <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token constant">POSITION</span><span class="token punctuation">[</span>index<span class="token punctuation">]</span>
    651. 

  651.             ctx<span class="token punctuation">.</span><span class="token function">drawImage</span><span class="token punctuation">(</span>dlCanvas<span class="token punctuation">,</span> left<span class="token punctuation">,</span> top<span class="token punctuation">,</span> width<span class="token punctuation">,</span> height<span class="token punctuation">)</span>
    652. 

  652.           <span class="token punctuation">}</span><span class="token punctuation">)</span>
    653. 

  653.         <span class="token punctuation">}</span>
    654. 

  654. 

  655.         <span class="token comment">// 贴二维码</span>
    656. 

  656.         ctx<span class="token punctuation">.</span><span class="token function">drawImage</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;qrcode&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">40</span><span class="token punctuation">,</span> <span class="token number">1280</span><span class="token punctuation">,</span> <span class="token number">580</span><span class="token punctuation">,</span> <span class="token number">136</span><span class="token punctuation">)</span>
    657. 

  657. 

  658.         <span class="token comment">// 贴文本</span>
    659. 

  659.         ctx<span class="token punctuation">.</span>font <span class="token operator">=</span> <span class="token string">&quot;18px sans-serif&quot;</span>
    660. 

  660.         ctx<span class="token punctuation">.</span>fillStyle <span class="token operator">=</span> <span class="token string">&quot;#666666&quot;</span>
    661. 

  661.         ctx<span class="token punctuation">.</span><span class="token function">fillText</span><span class="token punctuation">(</span><span class="token string">'©公众号「有趣研究社」'</span><span class="token punctuation">,</span> <span class="token number">550</span><span class="token punctuation">,</span> <span class="token number">1420</span><span class="token punctuation">)</span>
    662. 

  662. 

  663.         <span class="token comment">// 导出图片</span>
    664. 

  664.         resultImageList<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>canvas<span class="token punctuation">.</span><span class="token function">toDataURL</span><span class="token punctuation">(</span><span class="token string">'image/jpeg'</span><span class="token punctuation">,</span> <span class="token number">0.8</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    665. 

  665.       <span class="token punctuation">}</span><span class="token punctuation">)</span>
    666. 

  666. 

  667.       <span class="token comment">// 打开图片预览</span>
    668. 

  668.       <span class="token keyword">this</span><span class="token punctuation">.</span>isShowTip <span class="token operator">=</span> <span class="token boolean">true</span>
    669. 

  669.       <span class="token keyword">const</span> _this <span class="token operator">=</span> <span class="token keyword">this</span>
    670. 

  670.       <span class="token function">ImagePreview</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    671. 

  671.         <span class="token literal-property property">images</span><span class="token operator">:</span> resultImageList<span class="token punctuation">,</span>
    672. 

  672.         <span class="token literal-property property">closeable</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    673. 

  673.         <span class="token function">onClose</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    674. 

  674.           _this<span class="token punctuation">.</span>isShowTip <span class="token operator">=</span> <span class="token boolean">false</span>
    675. 

  675.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    676. 

  676.       <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    677. 

  677.       <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">showTopTip</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    678. 

  678.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    679. 

  679. 

  680.     <span class="token comment">// 弹出顶部提示语</span>
    681. 

  681.     <span class="token function">showTopTip</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    682. 

  682.       <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>sessionStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">'showTip'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    683. 

  683.         sessionStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">'showTip'</span><span class="token punctuation">,</span> <span class="token string">'true'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    684. 

  684.         <span class="token function">Notify</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    685. 

  685.           <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'长按图片可保存到本地'</span><span class="token punctuation">,</span>
    686. 

  686.           <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#c33825'</span><span class="token punctuation">,</span>
    687. 

  687.           <span class="token literal-property property">background</span><span class="token operator">:</span> <span class="token string">'#eed3ae'</span><span class="token punctuation">,</span>
    688. 

  688.         <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    689. 

  689.       <span class="token punctuation">}</span>
    690. 

  690.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    691. 

  691. 

  692.     <span class="token comment">// 获取对联图片列表</span>
    693. 

  693.     <span class="token function">getImageList</span><span class="token punctuation">(</span>type <span class="token operator">=</span> <span class="token string">'image/png'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    694. 

  694.       <span class="token keyword">const</span> imageList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
    695. 

  695.       <span class="token keyword">this</span><span class="token punctuation">.</span>canvasList<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    696. 

  696.         <span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">===</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    697. 

  697.           <span class="token comment">// `福`字必须是png格式</span>
    698. 

  698.           type <span class="token operator">=</span> <span class="token string">'image/png'</span>
    699. 

  699.         <span class="token punctuation">}</span>
    700. 

  700.         imageList<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">[</span><span class="token constant">INSTANTIATE_NAME</span> <span class="token operator">+</span> index<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">toDataURL</span><span class="token punctuation">(</span>type<span class="token punctuation">,</span> <span class="token number">0.8</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    701. 

  701.       <span class="token punctuation">}</span><span class="token punctuation">)</span>
    702. 

  702.       <span class="token keyword">return</span> imageList
    703. 

  703.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    704. 

  704. 

  705.     <span class="token comment">// 进度改变时</span>
    706. 

  706.     <span class="token function">changeProgress</span><span class="token punctuation">(</span><span class="token parameter">progress</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    707. 

  707.       <span class="token keyword">this</span><span class="token punctuation">.</span>progress <span class="token operator">=</span> progress
    708. 

  708.       <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleChangeSize</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    709. 

  709.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    710. 

  710. 

  711.     <span class="token comment">// 调整画笔大小</span>
    712. 

  712.     <span class="token function">handleChangeSize</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    713. 

  713.       <span class="token keyword">const</span> <span class="token punctuation">{</span> progress <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span>
    714. 

  714.       <span class="token keyword">this</span><span class="token punctuation">.</span>curCanvasInstantiate<span class="token punctuation">.</span>minWidth <span class="token operator">=</span> <span class="token constant">MIN_WIDTH</span> <span class="token operator">*</span> progress <span class="token operator">/</span> <span class="token number">100</span>
    715. 

  715.       <span class="token keyword">this</span><span class="token punctuation">.</span>curCanvasInstantiate<span class="token punctuation">.</span>maxWidth <span class="token operator">=</span> <span class="token constant">MAX_WIDTH</span> <span class="token operator">*</span> progress <span class="token operator">/</span> <span class="token number">100</span>
    716. 

  716.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    717. 

  717. 

  718.     <span class="token comment">// 刷新对联</span>
    719. 

  719.     <span class="token function">handleRefresh</span><span class="token punctuation">(</span><span class="token parameter">rotate</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    720. 

  720.       <span class="token keyword">this</span><span class="token punctuation">.</span>duilian <span class="token operator">=</span> duilianList<span class="token punctuation">[</span>Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> duilianList<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">]</span>
    721. 

  721. 

  722.       <span class="token keyword">if</span> <span class="token punctuation">(</span>rotate<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    723. 

  723.         <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>mode <span class="token operator">===</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    724. 

  724.           <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">refreshDuilian</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    725. 

  725.         <span class="token punctuation">}</span>
    726. 

  726.         <span class="token comment">// 使icon旋转</span>
    727. 

  727.         <span class="token keyword">this</span><span class="token punctuation">.</span>isRotate <span class="token operator">=</span> <span class="token boolean">true</span>
    728. 

  728.         <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    729. 

  729.           <span class="token keyword">this</span><span class="token punctuation">.</span>isRotate <span class="token operator">=</span> <span class="token boolean">false</span>
    730. 

  730.         <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">300</span><span class="token punctuation">)</span>
    731. 

  731.       <span class="token punctuation">}</span>
    732. 

  732.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    733. 

  733. 

  734.     <span class="token comment">// 播放背景音乐</span>
    735. 

  735.     <span class="token function">handlePlay</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    736. 

  736.       <span class="token keyword">const</span> <span class="token punctuation">{</span> bgm <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$refs
    737. 

  737.       <span class="token keyword">if</span> <span class="token punctuation">(</span>bgm<span class="token punctuation">.</span>paused<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    738. 

  738.         bgm<span class="token punctuation">.</span><span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    739. 

  739.         <span class="token keyword">this</span><span class="token punctuation">.</span>isPlay <span class="token operator">=</span> <span class="token boolean">true</span>
    740. 

  740.       <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    741. 

  741.         bgm<span class="token punctuation">.</span><span class="token function">pause</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    742. 

  742.         <span class="token keyword">this</span><span class="token punctuation">.</span>isPlay <span class="token operator">=</span> <span class="token boolean">false</span>
    743. 

  743.       <span class="token punctuation">}</span>
    744. 

  744.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    745. 

  745. 

  746.     <span class="token comment">// 完成输入对联</span>
    747. 

  747.     <span class="token function">handleSubmitInput</span><span class="token punctuation">(</span><span class="token parameter">values</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    748. 

  748.       <span class="token keyword">this</span><span class="token punctuation">.</span>duilian <span class="token operator">=</span> values
    749. 

  749.       <span class="token keyword">this</span><span class="token punctuation">.</span>showInputBox <span class="token operator">=</span> <span class="token boolean">false</span>
    750. 

  750.       <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">refreshDuilian</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    751. 

  751.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    752. 

  752. 

  753.     <span class="token comment">// 完成挑选对联</span>
    754. 

  754.     <span class="token function">handlePickDuilian</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    755. 

  755.       <span class="token keyword">this</span><span class="token punctuation">.</span>duilian <span class="token operator">=</span> item
    756. 

  756.       <span class="token keyword">this</span><span class="token punctuation">.</span>showPickBox <span class="token operator">=</span> <span class="token boolean">false</span>
    757. 

  757.       <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">refreshDuilian</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    758. 

  758.     <span class="token punctuation">}</span>
    759. 

  759.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    760. 

  760. <span class="token punctuation">}</span><span class="token punctuation">;</span>
    761. 

  761. <span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
    762. 

  762. 

  763. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br><span class="line-number">135</span><br><span class="line-number">136</span><br><span class="line-number">137</span><br><span class="line-number">138</span><br><span class="line-number">139</span><br><span class="line-number">140</span><br><span class="line-number">141</span><br><span class="line-number">142</span><br><span class="line-number">143</span><br><span class="line-number">144</span><br><span class="line-number">145</span><br><span class="line-number">146</span><br><span class="line-number">147</span><br><span class="line-number">148</span><br><span class="line-number">149</span><br><span class="line-number">150</span><br><span class="line-number">151</span><br><span class="line-number">152</span><br><span class="line-number">153</span><br><span class="line-number">154</span><br><span class="line-number">155</span><br><span class="line-number">156</span><br><span class="line-number">157</span><br><span class="line-number">158</span><br><span class="line-number">159</span><br><span class="line-number">160</span><br><span class="line-number">161</span><br><span class="line-number">162</span><br><span class="line-number">163</span><br><span class="line-number">164</span><br><span class="line-number">165</span><br><span class="line-number">166</span><br><span class="line-number">167</span><br><span class="line-number">168</span><br><span class="line-number">169</span><br><span class="line-number">170</span><br><span class="line-number">171</span><br><span class="line-number">172</span><br><span class="line-number">173</span><br><span class="line-number">174</span><br><span class="line-number">175</span><br><span class="line-number">176</span><br><span class="line-number">177</span><br><span class="line-number">178</span><br><span class="line-number">179</span><br><span class="line-number">180</span><br><span class="line-number">181</span><br><span class="line-number">182</span><br><span class="line-number">183</span><br><span class="line-number">184</span><br><span class="line-number">185</span><br><span class="line-number">186</span><br><span class="line-number">187</span><br><span class="line-number">188</span><br><span class="line-number">189</span><br><span class="line-number">190</span><br><span class="line-number">191</span><br><span class="line-number">192</span><br><span class="line-number">193</span><br><span class="line-number">194</span><br><span class="line-number">195</span><br><span class="line-number">196</span><br><span class="line-number">197</span><br><span class="line-number">198</span><br><span class="line-number">199</span><br><span class="line-number">200</span><br><span class="line-number">201</span><br><span class="line-number">202</span><br><span class="line-number">203</span><br><span class="line-number">204</span><br><span class="line-number">205</span><br><span class="line-number">206</span><br><span class="line-number">207</span><br><span class="line-number">208</span><br><span class="line-number">209</span><br><span class="line-number">210</span><br><span class="line-number">211</span><br><span class="line-number">212</span><br><span class="line-number">213</span><br><span class="line-number">214</span><br><span class="line-number">215</span><br><span class="line-number">216</span><br><span class="line-number">217</span><br><span class="line-number">218</span><br><span class="line-number">219</span><br><span class="line-number">220</span><br><span class="line-number">221</span><br><span class="line-number">222</span><br><span class="line-number">223</span><br><span class="line-number">224</span><br><span class="line-number">225</span><br><span class="line-number">226</span><br><span class="line-number">227</span><br><span class="line-number">228</span><br><span class="line-number">229</span><br><span class="line-number">230</span><br><span class="line-number">231</span><br><span class="line-number">232</span><br><span class="line-number">233</span><br><span class="line-number">234</span><br><span class="line-number">235</span><br><span class="line-number">236</span><br><span class="line-number">237</span><br><span class="line-number">238</span><br><span class="line-number">239</span><br><span class="line-number">240</span><br><span class="line-number">241</span><br><span class="line-number">242</span><br><span class="line-number">243</span><br><span class="line-number">244</span><br><span class="line-number">245</span><br><span class="line-number">246</span><br><span class="line-number">247</span><br><span class="line-number">248</span><br><span class="line-number">249</span><br><span class="line-number">250</span><br><span class="line-number">251</span><br><span class="line-number">252</span><br><span class="line-number">253</span><br><span class="line-number">254</span><br><span class="line-number">255</span><br><span class="line-number">256</span><br><span class="line-number">257</span><br><span class="line-number">258</span><br><span class="line-number">259</span><br><span class="line-number">260</span><br><span class="line-number">261</span><br><span class="line-number">262</span><br><span class="line-number">263</span><br><span class="line-number">264</span><br><span class="line-number">265</span><br><span class="line-number">266</span><br><span class="line-number">267</span><br><span class="line-number">268</span><br><span class="line-number">269</span><br><span class="line-number">270</span><br><span class="line-number">271</span><br><span class="line-number">272</span><br><span class="line-number">273</span><br><span class="line-number">274</span><br><span class="line-number">275</span><br><span class="line-number">276</span><br><span class="line-number">277</span><br><span class="line-number">278</span><br><span class="line-number">279</span><br><span class="line-number">280</span><br><span class="line-number">281</span><br><span class="line-number">282</span><br><span class="line-number">283</span><br><span class="line-number">284</span><br><span class="line-number">285</span><br><span class="line-number">286</span><br><span class="line-number">287</span><br><span class="line-number">288</span><br><span class="line-number">289</span><br><span class="line-number">290</span><br><span class="line-number">291</span><br><span class="line-number">292</span><br><span class="line-number">293</span><br><span class="line-number">294</span><br><span class="line-number">295</span><br><span class="line-number">296</span><br><span class="line-number">297</span><br><span class="line-number">298</span><br><span class="line-number">299</span><br><span class="line-number">300</span><br><span class="line-number">301</span><br><span class="line-number">302</span><br><span class="line-number">303</span><br><span class="line-number">304</span><br><span class="line-number">305</span><br><span class="line-number">306</span><br><span class="line-number">307</span><br><span class="line-number">308</span><br><span class="line-number">309</span><br><span class="line-number">310</span><br><span class="line-number">311</span><br><span class="line-number">312</span><br><span class="line-number">313</span><br><span class="line-number">314</span><br><span class="line-number">315</span><br><span class="line-number">316</span><br><span class="line-number">317</span><br><span class="line-number">318</span><br><span class="line-number">319</span><br><span class="line-number">320</span><br><span class="line-number">321</span><br><span class="line-number">322</span><br><span class="line-number">323</span><br><span class="line-number">324</span><br><span class="line-number">325</span><br><span class="line-number">326</span><br><span class="line-number">327</span><br><span class="line-number">328</span><br><span class="line-number">329</span><br><span class="line-number">330</span><br><span class="line-number">331</span><br><span class="line-number">332</span><br><span class="line-number">333</span><br><span class="line-number">334</span><br><span class="line-number">335</span><br><span class="line-number">336</span><br><span class="line-number">337</span><br><span class="line-number">338</span><br><span class="line-number">339</span><br><span class="line-number">340</span><br><span class="line-number">341</span><br><span class="line-number">342</span><br><span class="line-number">343</span><br><span class="line-number">344</span><br><span class="line-number">345</span><br><span class="line-number">346</span><br><span class="line-number">347</span><br><span class="line-number">348</span><br><span class="line-number">349</span><br><span class="line-number">350</span><br><span class="line-number">351</span><br><span class="line-number">352</span><br><span class="line-number">353</span><br><span class="line-number">354</span><br><span class="line-number">355</span><br><span class="line-number">356</span><br><span class="line-number">357</span><br><span class="line-number">358</span><br><span class="line-number">359</span><br><span class="line-number">360</span><br><span class="line-number">361</span><br><span class="line-number">362</span><br><span class="line-number">363</span><br><span class="line-number">364</span><br><span class="line-number">365</span><br><span class="line-number">366</span><br><span class="line-number">367</span><br><span class="line-number">368</span><br><span class="line-number">369</span><br><span class="line-number">370</span><br><span class="line-number">371</span><br><span class="line-number">372</span><br><span class="line-number">373</span><br><span class="line-number">374</span><br><span class="line-number">375</span><br><span class="line-number">376</span><br><span class="line-number">377</span><br><span class="line-number">378</span><br><span class="line-number">379</span><br><span class="line-number">380</span><br><span class="line-number">381</span><br><span class="line-number">382</span><br><span class="line-number">383</span><br><span class="line-number">384</span><br><span class="line-number">385</span><br><span class="line-number">386</span><br><span class="line-number">387</span><br><span class="line-number">388</span><br><span class="line-number">389</span><br><span class="line-number">390</span><br><span class="line-number">391</span><br><span class="line-number">392</span><br><span class="line-number">393</span><br><span class="line-number">394</span><br><span class="line-number">395</span><br><span class="line-number">396</span><br><span class="line-number">397</span><br><span class="line-number">398</span><br><span class="line-number">399</span><br><span class="line-number">400</span><br><span class="line-number">401</span><br><span class="line-number">402</span><br><span class="line-number">403</span><br><span class="line-number">404</span><br><span class="line-number">405</span><br><span class="line-number">406</span><br><span class="line-number">407</span><br><span class="line-number">408</span><br><span class="line-number">409</span><br><span class="line-number">410</span><br><span class="line-number">411</span><br><span class="line-number">412</span><br><span class="line-number">413</span><br><span class="line-number">414</span><br><span class="line-number">415</span><br><span class="line-number">416</span><br><span class="line-number">417</span><br><span class="line-number">418</span><br><span class="line-number">419</span><br><span class="line-number">420</span><br><span class="line-number">421</span><br><span class="line-number">422</span><br><span class="line-number">423</span><br><span class="line-number">424</span><br><span class="line-number">425</span><br><span class="line-number">426</span><br><span class="line-number">427</span><br><span class="line-number">428</span><br><span class="line-number">429</span><br><span class="line-number">430</span><br><span class="line-number">431</span><br><span class="line-number">432</span><br><span class="line-number">433</span><br><span class="line-number">434</span><br><span class="line-number">435</span><br><span class="line-number">436</span><br><span class="line-number">437</span><br><span class="line-number">438</span><br><span class="line-number">439</span><br><span class="line-number">440</span><br><span class="line-number">441</span><br><span class="line-number">442</span><br><span class="line-number">443</span><br><span class="line-number">444</span><br><span class="line-number">445</span><br><span class="line-number">446</span><br><span class="line-number">447</span><br><span class="line-number">448</span><br><span class="line-number">449</span><br><span class="line-number">450</span><br><span class="line-number">451</span><br><span class="line-number">452</span><br><span class="line-number">453</span><br><span class="line-number">454</span><br><span class="line-number">455</span><br><span class="line-number">456</span><br><span class="line-number">457</span><br><span class="line-number">458</span><br><span class="line-number">459</span><br><span class="line-number">460</span><br><span class="line-number">461</span><br><span class="line-number">462</span><br><span class="line-number">463</span><br><span class="line-number">464</span><br><span class="line-number">465</span><br><span class="line-number">466</span><br><span class="line-number">467</span><br><span class="line-number">468</span><br><span class="line-number">469</span><br><span class="line-number">470</span><br><span class="line-number">471</span><br><span class="line-number">472</span><br><span class="line-number">473</span><br><span class="line-number">474</span><br><span class="line-number">475</span><br><span class="line-number">476</span><br><span class="line-number">477</span><br><span class="line-number">478</span><br><span class="line-number">479</span><br><span class="line-number">480</span><br><span class="line-number">481</span><br><span class="line-number">482</span><br><span class="line-number">483</span><br><span class="line-number">484</span><br><span class="line-number">485</span><br><span class="line-number">486</span><br><span class="line-number">487</span><br><span class="line-number">488</span><br><span class="line-number">489</span><br><span class="line-number">490</span><br><span class="line-number">491</span><br><span class="line-number">492</span><br><span class="line-number">493</span><br><span class="line-number">494</span><br><span class="line-number">495</span><br><span class="line-number">496</span><br><span class="line-number">497</span><br><span class="line-number">498</span><br><span class="line-number">499</span><br><span class="line-number">500</span><br><span class="line-number">501</span><br><span class="line-number">502</span><br><span class="line-number">503</span><br><span class="line-number">504</span><br><span class="line-number">505</span><br><span class="line-number">506</span><br><span class="line-number">507</span><br><span class="line-number">508</span><br><span class="line-number">509</span><br><span class="line-number">510</span><br><span class="line-number">511</span><br><span class="line-number">512</span><br><span class="line-number">513</span><br><span class="line-number">514</span><br><span class="line-number">515</span><br><span class="line-number">516</span><br><span class="line-number">517</span><br><span class="line-number">518</span><br><span class="line-number">519</span><br><span class="line-number">520</span><br><span class="line-number">521</span><br><span class="line-number">522</span><br><span class="line-number">523</span><br><span class="line-number">524</span><br><span class="line-number">525</span><br><span class="line-number">526</span><br><span class="line-number">527</span><br><span class="line-number">528</span><br><span class="line-number">529</span><br><span class="line-number">530</span><br><span class="line-number">531</span><br><span class="line-number">532</span><br><span class="line-number">533</span><br><span class="line-number">534</span><br><span class="line-number">535</span><br><span class="line-number">536</span><br><span class="line-number">537</span><br><span class="line-number">538</span><br><span class="line-number">539</span><br><span class="line-number">540</span><br><span class="line-number">541</span><br><span class="line-number">542</span><br><span class="line-number">543</span><br><span class="line-number">544</span><br><span class="line-number">545</span><br><span class="line-number">546</span><br><span class="line-number">547</span><br><span class="line-number">548</span><br><span class="line-number">549</span><br><span class="line-number">550</span><br><span class="line-number">551</span><br><span class="line-number">552</span><br><span class="line-number">553</span><br><span class="line-number">554</span><br><span class="line-number">555</span><br><span class="line-number">556</span><br><span class="line-number">557</span><br><span class="line-number">558</span><br><span class="line-number">559</span><br><span class="line-number">560</span><br><span class="line-number">561</span><br><span class="line-number">562</span><br><span class="line-number">563</span><br><span class="line-number">564</span><br><span class="line-number">565</span><br><span class="line-number">566</span><br><span class="line-number">567</span><br><span class="line-number">568</span><br><span class="line-number">569</span><br><span class="line-number">570</span><br><span class="line-number">571</span><br><span class="line-number">572</span><br><span class="line-number">573</span><br><span class="line-number">574</span><br><span class="line-number">575</span><br><span class="line-number">576</span><br><span class="line-number">577</span><br><span class="line-number">578</span><br><span class="line-number">579</span><br><span class="line-number">580</span><br><span class="line-number">581</span><br><span class="line-number">582</span><br><span class="line-number">583</span><br><span class="line-number">584</span><br><span class="line-number">585</span><br><span class="line-number">586</span><br><span class="line-number">587</span><br><span class="line-number">588</span><br><span class="line-number">589</span><br><span class="line-number">590</span><br><span class="line-number">591</span><br><span class="line-number">592</span><br><span class="line-number">593</span><br><span class="line-number">594</span><br><span class="line-number">595</span><br><span class="line-number">596</span><br><span class="line-number">597</span><br><span class="line-number">598</span><br><span class="line-number">599</span><br><span class="line-number">600</span><br><span class="line-number">601</span><br><span class="line-number">602</span><br><span class="line-number">603</span><br><span class="line-number">604</span><br><span class="line-number">605</span><br><span class="line-number">606</span><br><span class="line-number">607</span><br><span class="line-number">608</span><br><span class="line-number">609</span><br><span class="line-number">610</span><br><span class="line-number">611</span><br><span class="line-number">612</span><br><span class="line-number">613</span><br><span class="line-number">614</span><br><span class="line-number">615</span><br><span class="line-number">616</span><br><span class="line-number">617</span><br><span class="line-number">618</span><br><span class="line-number">619</span><br><span class="line-number">620</span><br><span class="line-number">621</span><br><span class="line-number">622</span><br><span class="line-number">623</span><br><span class="line-number">624</span><br><span class="line-number">625</span><br><span class="line-number">626</span><br><span class="line-number">627</span><br><span class="line-number">628</span><br><span class="line-number">629</span><br><span class="line-number">630</span><br><span class="line-number">631</span><br><span class="line-number">632</span><br><span class="line-number">633</span><br><span class="line-number">634</span><br><span class="line-number">635</span><br><span class="line-number">636</span><br><span class="line-number">637</span><br><span class="line-number">638</span><br><span class="line-number">639</span><br><span class="line-number">640</span><br><span class="line-number">641</span><br><span class="line-number">642</span><br><span class="line-number">643</span><br><span class="line-number">644</span><br><span class="line-number">645</span><br><span class="line-number">646</span><br><span class="line-number">647</span><br><span class="line-number">648</span><br><span class="line-number">649</span><br><span class="line-number">650</span><br><span class="line-number">651</span><br><span class="line-number">652</span><br><span class="line-number">653</span><br><span class="line-number">654</span><br><span class="line-number">655</span><br><span class="line-number">656</span><br><span class="line-number">657</span><br><span class="line-number">658</span><br><span class="line-number">659</span><br><span class="line-number">660</span><br><span class="line-number">661</span><br><span class="line-number">662</span><br><span class="line-number">663</span><br><span class="line-number">664</span><br><span class="line-number">665</span><br><span class="line-number">666</span><br><span class="line-number">667</span><br><span class="line-number">668</span><br><span class="line-number">669</span><br><span class="line-number">670</span><br><span class="line-number">671</span><br><span class="line-number">672</span><br><span class="line-number">673</span><br><span class="line-number">674</span><br><span class="line-number">675</span><br><span class="line-number">676</span><br><span class="line-number">677</span><br><span class="line-number">678</span><br><span class="line-number">679</span><br><span class="line-number">680</span><br><span class="line-number">681</span><br><span class="line-number">682</span><br><span class="line-number">683</span><br><span class="line-number">684</span><br><span class="line-number">685</span><br><span class="line-number">686</span><br><span class="line-number">687</span><br><span class="line-number">688</span><br><span class="line-number">689</span><br><span class="line-number">690</span><br><span class="line-number">691</span><br><span class="line-number">692</span><br><span class="line-number">693</span><br><span class="line-number">694</span><br><span class="line-number">695</span><br><span class="line-number">696</span><br><span class="line-number">697</span><br><span class="line-number">698</span><br><span class="line-number">699</span><br><span class="line-number">700</span><br><span class="line-number">701</span><br><span class="line-number">702</span><br><span class="line-number">703</span><br><span class="line-number">704</span><br><span class="line-number">705</span><br><span class="line-number">706</span><br><span class="line-number">707</span><br><span class="line-number">708</span><br><span class="line-number">709</span><br><span class="line-number">710</span><br><span class="line-number">711</span><br><span class="line-number">712</span><br><span class="line-number">713</span><br><span class="line-number">714</span><br><span class="line-number">715</span><br><span class="line-number">716</span><br><span class="line-number">717</span><br><span class="line-number">718</span><br><span class="line-number">719</span><br><span class="line-number">720</span><br><span class="line-number">721</span><br><span class="line-number">722</span><br><span class="line-number">723</span><br><span class="line-number">724</span><br><span class="line-number">725</span><br><span class="line-number">726</span><br><span class="line-number">727</span><br><span class="line-number">728</span><br><span class="line-number">729</span><br><span class="line-number">730</span><br><span class="line-number">731</span><br><span class="line-number">732</span><br><span class="line-number">733</span><br><span class="line-number">734</span><br><span class="line-number">735</span><br><span class="line-number">736</span><br><span class="line-number">737</span><br></div></div><p>更多有趣的小网页欢迎关注公众号<code>有趣研究社</code>:</p> <blockquote><p><a href="https://cl.heBody.com/" target="_blank" rel="noopener noreferrer">手写春联<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a><br> <a href="https://game.heBody.com/" target="_blank" rel="noopener noreferrer">FC在线模拟器<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a><br> <a href="https://avatar.heBody.com/" target="_blank" rel="noopener noreferrer">爱国头像生成器<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a><br> <a href="https://zfb.heBody.com/" target="_blank" rel="noopener noreferrer">到账语音生成器<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote></div></div>  <div class="page-edit"><div class="edit-link"><a href="https://github.com/heBody/blog/edit/master/docs/_posts/随笔/我做了一个手写春联小网页，祝大家虎年暴富.md" target="_blank" rel="noopener noreferrer">编辑</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2022/12/15, 12:09:39</span></div></div> <div class="page-nav-wapper"><!----> <!----></div></div> <div class="article-list"><div class="article-title"><a href="/blog/archives/" class="iconfont icon-bi">最近更新</a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><a href="/blog/pages/922650/"><div>
    764. 

  764.             Git修改分支名
    765. 

  765.             <!----></div></a> <span class="date">08-11</span></dt></dl><dl><dd>02</dd> <dt><a href="/blog/pages/55f894/"><div>
    766. 

  766.             CSS给table的tbody添加滚动条
    767. 

  767.             <!----></div></a> <span class="date">06-29</span></dt></dl><dl><dd>03</dd> <dt><a href="/blog/pages/dcebaf/"><div>
    768. 

  768.             一行代码“黑”掉任意网站
    769. 

  769.             <span class="title-tag">
    770. 

  770.               原创
    771. 

  771.             </span></div></a> <span class="date">11-25</span></dt></dl> <dl><dd></dd> <dt><a href="/blog/archives/" class="more">更多文章&gt;</a></dt></dl></div></div></main></div> <div class="footer"><div class="icons"><a href="mailto:30363811@qq.com" title="发邮件" target="_blank" class="iconfont icon-youjian"></a><a href="https://github.com/heBody" title="GitHub" target="_blank" class="iconfont icon-github"></a></div> 
    772. 

  772.     Copyright © 2016-2022
    773. 

  773.     <span>Hesb | <a href="https://github.com/heBody/blob" target="_blank">MIT License</a></span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
    774. 

  774.           跟随系统
    775. 

  775.         </li><li class="iconfont icon-rijianmoshi">
    776. 

  776.           浅色模式
    777. 

  777.         </li><li class="iconfont icon-yejianmoshi">
    778. 

  778.           深色模式
    779. 

  779.         </li><li class="iconfont icon-yuedu">
    780. 

  780.           阅读模式
    781. 

  781.         </li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"><div></div></div></div>
    782. 

  782.     <script src="/blog/assets/js/app.90754bd5.js" defer></script><script src="/blog/assets/js/2.106f41fb.js" defer></script><script src="/blog/assets/js/3.6748bd5c.js" defer></script><script src="/blog/assets/js/85.24532d6a.js" defer></script>
    783. 

  783.   </body>
    784. 

  784. </html>
    785.