guorui
/
mkdocs_pro_wcowin


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938
							
<!doctype html>
<html lang="zh" class="no-js">
  <head>
    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      
      
        <meta name="author" content="Wcowin">
      
      
        <link rel="canonical" href="http://wcowin.work/Mkdocs-Wcowin/blog/websitebeauty/backgroud/">
      
      
        <link rel="prev" href="../shubiao/">
      
      
        <link rel="next" href="../../../develop/Markdown/markdown/">
      
      
      <link rel="icon" href="../../../img/apple-line.png">
      <meta name="generator" content="mkdocs-1.5.3, mkdocs-material-9.4.2">
    
    
        <title>背景特效 - Mkdocs-Wcowin中文主题</title>
      
    
      <link rel="stylesheet" href="../../../assets/stylesheets/main.d451bc0e.min.css">
      
        
        <link rel="stylesheet" href="../../../assets/stylesheets/palette.a5377069.min.css">
      
      
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
        <style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
      
    
      <link rel="stylesheet" href="../../../stylesheets/extra.css">
    
      <link rel="stylesheet" href="../../../stylesheets/link.css">
    
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.css">
    
      <link rel="stylesheet" href="../../../ckplayer/css/ckplayer.css">
    
      <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont@1.1.0/style.css">
    
    <script>__md_scope=new URL("../../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
    
      
<script id="__analytics">function __md_analytics(){function n(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],n("js",new Date),n("config",""),document.addEventListener("DOMContentLoaded",function(){document.forms.search&&document.forms.search.query.addEventListener("blur",function(){this.value&&n("event","search",{search_term:this.value})}),document$.subscribe(function(){var a=document.forms.feedback;if(void 0!==a)for(var e of a.querySelectorAll("[type=submit]"))e.addEventListener("click",function(e){e.preventDefault();var t=document.location.pathname,e=this.getAttribute("data-md-value");n("event","feedback",{page:t,data:e}),a.firstElementChild.disabled=!0;e=a.querySelector(".md-feedback__note [data-md-value='"+e+"']");e&&(e.hidden=!1)}),a.hidden=!1}),location$.subscribe(function(e){n("config","",{page_path:e.pathname})})});var e=document.createElement("script");e.async=!0,e.src="https://www.googletagmanager.com/gtag/js?id=",document.getElementById("__analytics").insertAdjacentElement("afterEnd",e)}</script>
  
    <script>"undefined"!=typeof __md_analytics&&__md_analytics()</script>
  

    <link rel="stylesheet" href="../../../assets/stylesheets/custom.00c04c01.min.css">
  
  </head>
  
  
    <body dir="ltr" data-md-color-scheme="default" data-md-color-primary="blue-grey" data-md-color-accent="indigo">
  
    
      <script>var palette=__md_get("__palette");if(palette&&"object"==typeof palette.color)for(var key of Object.keys(palette.color))document.body.setAttribute("data-md-color-"+key,palette.color[key])</script>
    
    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
    <label class="md-overlay" for="__drawer"></label>
    <div data-md-component="skip">
      
        
        <a href="#雪花" class="md-skip">
          跳转至
        </a>
      
    </div>
    <div data-md-component="announce">
      
        <aside class="md-banner">
          <div class="md-banner__inner md-grid md-typeset">
            
              <button class="md-banner__button md-icon" aria-label="不再显示此消息">
                
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
              </button>
            
            
     Follow <strong>@Wcowin</strong> on
    <a rel="me" href="https://space.bilibili.com/1407028951?spm_id_from=333.1007.0.0">
      <span class="twemoji bilibili">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79 0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603 5.7 5.737 8.6 12.997 8.6 21.797 0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8 6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2-6.2 6.3-14 9.5-23.6 9.5-9.6 0-17.5-3.2-23.6-9.5-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2 6.3-6.3 13.2-9.6 23.3-10 9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2-6.1 6.3-14 9.5-23.6 9.5-9.6 0-17.4-3.2-23.6-9.5-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2 6.3-6.3 14.1-9.6 23.3-10 9.2.4 17 3.7 23.3 10z"/></svg>
      </span>
      <strong>Bilibili</strong>
    </a>
    and
    <a href="https://twitter.com/Wcowin_">
      <span class="twemoji twitter">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
      </span>
      <strong>Twitter</strong>
    </a>
  
          </div>
          
            <script>var content,el=document.querySelector("[data-md-component=announce]");el&&(content=el.querySelector(".md-typeset"),__md_hash(content.innerHTML)===__md_get("__announce")&&(el.hidden=!0))</script>
          
        </aside>
      
    </div>
    
    
<header class="md-header" data-md-component="header">
  <nav class="md-header__inner md-grid" aria-label="页眉">
    <a href="../../.." title="Mkdocs-Wcowin中文主题" class="md-header__button md-logo" aria-label="Mkdocs-Wcowin中文主题" data-md-component="logo">
      
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg>

    </a>
    <label class="md-header__button md-icon" for="__drawer">
      
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
    </label>
    <div class="md-header__title" data-md-component="header-title">
      <div class="md-header__ellipsis">
        <div class="md-header__topic">
          <span class="md-ellipsis">
            Mkdocs-Wcowin中文主题
          </span>
        </div>
        <div class="md-header__topic" data-md-component="header-topic">
          <span class="md-ellipsis">
            
              背景特效
            
          </span>
        </div>
      </div>
    </div>
    
      
        <form class="md-header__option" data-md-component="palette">
  
    
    <input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="blue-grey" data-md-color-accent="indigo"  aria-label="切换至夜间模式"  type="radio" name="__palette" id="__palette_1">
    
      <label class="md-header__button md-icon" title="切换至夜间模式" for="__palette_2" hidden>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m17.75 4.09-2.53 1.94.91 3.06-2.63-1.81-2.63 1.81.91-3.06-2.53-1.94L12.44 4l1.06-3 1.06 3 3.19.09m3.5 6.91-1.64 1.25.59 1.98-1.7-1.17-1.7 1.17.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95 2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14.4-.4.82-.76 1.27-1.08.75-.53 1.93.36 1.85 1.19-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82-2.81 3.14-2.7 7.96.31 10.98 3.02 3.01 7.84 3.12 10.98.31Z"/></svg>
      </label>
    
  
    <input class="md-option" data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme="slate" data-md-color-primary="black" data-md-color-accent="indigo"  aria-label="切换至日间模式"  type="radio" name="__palette" id="__palette_2">
    
      <label class="md-header__button md-icon" title="切换至日间模式" for="__palette_1" hidden>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0-7 2.39 3.42C13.65 5.15 12.84 5 12 5c-.84 0-1.65.15-2.39.42L12 2M3.34 7l4.16-.35A7.2 7.2 0 0 0 5.94 8.5c-.44.74-.69 1.5-.83 2.29L3.34 7m.02 10 1.76-3.77a7.131 7.131 0 0 0 2.38 4.14L3.36 17M20.65 7l-1.77 3.79a7.023 7.023 0 0 0-2.38-4.15l4.15.36m-.01 10-4.14.36c.59-.51 1.12-1.14 1.54-1.86.42-.73.69-1.5.83-2.29L20.64 17M12 22l-2.41-3.44c.74.27 1.55.44 2.41.44.82 0 1.63-.17 2.37-.44L12 22Z"/></svg>
      </label>
    
  
</form>
      
    
      <label class="md-header__button md-icon" for="__search">
        
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
      </label>
      <div class="md-search" data-md-component="search" role="dialog">
  <label class="md-search__overlay" for="__search"></label>
  <div class="md-search__inner" role="search">
    <form class="md-search__form" name="search">
      <input type="text" class="md-search__input" name="query" aria-label="搜索" placeholder="搜索" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
      <label class="md-search__icon md-icon" for="__search">
        
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
        
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
      </label>
      <nav class="md-search__options" aria-label="查找">
        
          <a href="javascript:void(0)" class="md-search__icon md-icon" title="分享" aria-label="分享" data-clipboard data-clipboard-text="" data-md-component="search-share" tabindex="-1">
            
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7 0-.24-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66 0 1.61 1.31 2.91 2.92 2.91 1.61 0 2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08Z"/></svg>
          </a>
        
        <button type="reset" class="md-search__icon md-icon" title="清空当前内容" aria-label="清空当前内容" tabindex="-1">
          
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
        </button>
      </nav>
      
        <div class="md-search__suggest" data-md-component="search-suggest"></div>
      
    </form>
    <div class="md-search__output">
      <div class="md-search__scrollwrap" data-md-scrollfix>
        <div class="md-search-result" data-md-component="search-result">
          <div class="md-search-result__meta">
            正在初始化搜索引擎
          </div>
          <ol class="md-search-result__list" role="presentation"></ol>
        </div>
      </div>
    </div>
  </div>
</div>
    
    
      <div class="md-header__source">
        <a href="https://github.com/Wcowin/Mkdocs-Wcowin" title="前往仓库" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
  </div>
  <div class="md-source__repository">
    Mkdocs-Wcowin
  </div>
</a>
      </div>
    
  </nav>
  
</header>
    
    <div class="md-container" data-md-component="container">
      
      
<nav class="md-tabs" aria-label="标签" data-md-component="tabs">
  <div class="md-grid">
    <ul class="md-tabs__list">
      
        
      <li class="md-tabs__item md-tabs__item--active">
        <a href="../../Mkdocs/mkdocs1/" class="md-tabs__link">
          
  
  MKdocs中文教程

        </a>
      </li>
    
  
      <li class="md-tabs__item">
        <a href="../../../develop/Markdown/markdown/" class="md-tabs__link">
          
  
  建设MKdocs技能指北

        </a>
      </li>
    
  
    <li class="md-tabs__item">
      <a href="../../../tag/" class="md-tabs__link">
        
  
  标签

      </a>
    </li>
  

    <li class="md-tabs__item">
      <a href="../../../liuyanban/" class="md-tabs__link">
        
  
  留言板

      </a>
    </li>
  

      <li class="md-tabs__item">
        <a href="../../" class="md-tabs__link">
          
  
  Blogger

        </a>
      </li>
    
  
      <li class="md-tabs__item">
        <a href="../../../about/link/" class="md-tabs__link">
          
  
  友链

        </a>
      </li>
    
  
      <li class="md-tabs__item">
        <a href="../../../about/geren/" class="md-tabs__link">
          
  
  关于

        </a>
      </li>
    
  
    </ul>
  </div>
</nav>
          
        
      <main class="md-main" data-md-component="main">
        <div class="md-main__inner md-grid">
          
            
              <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    

<nav class="md-nav md-nav--primary md-nav--lifted" aria-label="导航栏" data-md-level="0">
  <label class="md-nav__title" for="__drawer">
    <a href="../../.." title="Mkdocs-Wcowin中文主题" class="md-nav__button md-logo" aria-label="Mkdocs-Wcowin中文主题" data-md-component="logo">
      
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg>

    </a>
    Mkdocs-Wcowin中文主题
  </label>
  
    <div class="md-nav__source">
      <a href="https://github.com/Wcowin/Mkdocs-Wcowin" title="前往仓库" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
  </div>
  <div class="md-source__repository">
    Mkdocs-Wcowin
  </div>
</a>
    </div>
  
  <ul class="md-nav__list" data-md-scrollfix>
    
      
    <li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
      
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_1" checked>
        
          
          <label class="md-nav__link" for="__nav_1" id="__nav_1_label" tabindex="">
            
  
  <span class="md-ellipsis">
    MKdocs中文教程
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_1_label" aria-expanded="true">
          <label class="md-nav__title" for="__nav_1">
            <span class="md-nav__icon md-icon"></span>
            MKdocs中文教程
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
    <li class="md-nav__item md-nav__item--section md-nav__item--nested">
      
        
        <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_1_1" >
        
          
          <label class="md-nav__link" for="__nav_1_1" id="__nav_1_1_label" tabindex="">
            
  
  <span class="md-ellipsis">
    MKdocs教程
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_1_1_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_1_1">
            <span class="md-nav__icon md-icon"></span>
            MKdocs教程
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
    <li class="md-nav__item">
      <a href="../../Mkdocs/mkdocs1/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    利用mkdocs部署静态网页至GitHub pages
  </span>
  

      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../Mkdocs/mkdocs2/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Mkdocs部署静态网页至GitHub pages配置说明(mkdocs.yml)
  </span>
  

      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../Mkdocs/mkdocs3/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    解决 mkdocs部署 Github Pages 自定义域名失效的问题
  </span>
  

      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../Mkdocs/mkdocsblog/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    网站添加Mkdocs博客
  </span>
  

      </a>
    </li>
  

          </ul>
        </nav>
      
    </li>
  

    <li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
      
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_1_2" checked>
        
          
          <label class="md-nav__link" for="__nav_1_2" id="__nav_1_2_label" tabindex="">
            
  
  <span class="md-ellipsis">
    Mkdocs美化
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_1_2_label" aria-expanded="true">
          <label class="md-nav__title" for="__nav_1_2">
            <span class="md-nav__icon md-icon"></span>
            Mkdocs美化
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
    <li class="md-nav__item">
      <a href="../mkcomments/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    添加评论系统(giscus为例)
  </span>
  

      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../webtalknow/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    添加在线聊天
  </span>
  

      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../linktech/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    添加友链
  </span>
  

      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../mkdocsfont/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    修改网站字体
  </span>
  

      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../shubiao/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    JS实现鼠标样式
  </span>
  

      </a>
    </li>
  

    <li class="md-nav__item md-nav__item--active">
      
      <input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
      
      
        <label class="md-nav__link md-nav__link--active" for="__toc">
          
  
  <span class="md-ellipsis">
    背景特效
  </span>
  

          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <a href="./" class="md-nav__link md-nav__link--active">
        
  
  <span class="md-ellipsis">
    背景特效
  </span>
  

      </a>
      
        
<nav class="md-nav md-nav--secondary" aria-label="目录">
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      目录
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#雪花" class="md-nav__link">
    雪花❄️
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#樱花" class="md-nav__link">
    樱花🌸
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#线条" class="md-nav__link">
    线条
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#粒子" class="md-nav__link">
    粒子
  </a>
  
</li>
      
    </ul>
  
</nav>
      
    </li>
  

          </ul>
        </nav>
      
    </li>
  

          </ul>
        </nav>
      
    </li>
  

    <li class="md-nav__item md-nav__item--section md-nav__item--nested">
      
        
        <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2" >
        
          
          <label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="">
            
  
  <span class="md-ellipsis">
    建设MKdocs技能指北
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_2">
            <span class="md-nav__icon md-icon"></span>
            建设MKdocs技能指北
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
    <li class="md-nav__item md-nav__item--section md-nav__item--nested">
      
        
        <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_1" >
        
          
          <label class="md-nav__link" for="__nav_2_1" id="__nav_2_1_label" tabindex="">
            
  
  <span class="md-ellipsis">
    Markdown
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_1_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_2_1">
            <span class="md-nav__icon md-icon"></span>
            Markdown
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
    <li class="md-nav__item">
      <a href="../../../develop/Markdown/markdown/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Markdown指南
  </span>
  

      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../develop/Markdown/MWeb/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    MWeb Pro
  </span>
  

      </a>
    </li>
  

          </ul>
        </nav>
      
    </li>
  

    <li class="md-nav__item">
      <a href="../../../develop/git/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Git 实用技巧
  </span>
  

      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../develop/lighthouse/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    利用Lighthouse测试网站性能
  </span>
  

      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../develop/vercel/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    如何将 github pages 迁移到 vercel 上托管
  </span>
  

      </a>
    </li>
  

    <li class="md-nav__item md-nav__item--section md-nav__item--nested">
      
        
        <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_5" >
        
          
          <label class="md-nav__link" for="__nav_2_5" id="__nav_2_5_label" tabindex="">
            
  
  <span class="md-ellipsis">
    设计美学
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_5_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_2_5">
            <span class="md-nav__icon md-icon"></span>
            设计美学
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
    <li class="md-nav__item">
      <a href="../../../develop/designbeauty/db1/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    唐·诺曼—情感设计的三个层次
  </span>
  

      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../develop/designbeauty/my-to-desihn/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    我对设计的一些观点
  </span>
  

      </a>
    </li>
  

          </ul>
        </nav>
      
    </li>
  

          </ul>
        </nav>
      
    </li>
  

    <li class="md-nav__item">
      <a href="../../../tag/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    标签
  </span>
  

      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../liuyanban/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    留言板
  </span>
  

      </a>
    </li>
  

    <li class="md-nav__item md-nav__item--section md-nav__item--nested">
      
        
        <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_5" >
        
          
          <div class="md-nav__link md-nav__container">
            <a href="../../" class="md-nav__link ">
              
  
  <span class="md-ellipsis">
    Blogger
  </span>
  

            </a>
            
              
              <label class="md-nav__link " for="__nav_5" id="__nav_5_label" tabindex="">
                <span class="md-nav__icon md-icon"></span>
              </label>
            
          </div>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_5">
            <span class="md-nav__icon md-icon"></span>
            Blogger
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
    <li class="md-nav__item md-nav__item--section md-nav__item--nested">
      
        
        <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_5_2" >
        
          
          <label class="md-nav__link" for="__nav_5_2" id="__nav_5_2_label" tabindex="">
            
  
  <span class="md-ellipsis">
    归档
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_2_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_5_2">
            <span class="md-nav__icon md-icon"></span>
            归档
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
    <li class="md-nav__item">
      <a href="../../archive/2023/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    2023
  </span>
  

      </a>
    </li>
  

          </ul>
        </nav>
      
    </li>
  

    <li class="md-nav__item md-nav__item--section md-nav__item--nested">
      
        
        <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_5_3" >
        
          
          <label class="md-nav__link" for="__nav_5_3" id="__nav_5_3_label" tabindex="">
            
  
  <span class="md-ellipsis">
    分类
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_3_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_5_3">
            <span class="md-nav__icon md-icon"></span>
            分类
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
    <li class="md-nav__item">
      <a href="../../category/%E7%BD%91%E7%AB%99%E6%9B%B4%E6%96%B0%E8%AE%B0%E5%BD%95/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    网站更新记录
  </span>
  

      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../category/hello/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Hello
  </span>
  

      </a>
    </li>
  

          </ul>
        </nav>
      
    </li>
  

          </ul>
        </nav>
      
    </li>
  

    <li class="md-nav__item md-nav__item--section md-nav__item--nested">
      
        
        <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_6" >
        
          
          <label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="">
            
  
  <span class="md-ellipsis">
    友链
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_6">
            <span class="md-nav__icon md-icon"></span>
            友链
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
    <li class="md-nav__item">
      <a href="../../../about/link/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    友链
  </span>
  

      </a>
    </li>
  

          </ul>
        </nav>
      
    </li>
  

    <li class="md-nav__item md-nav__item--section md-nav__item--nested">
      
        
        <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_7" >
        
          
          <label class="md-nav__link" for="__nav_7" id="__nav_7_label" tabindex="">
            
  
  <span class="md-ellipsis">
    关于
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_7_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_7">
            <span class="md-nav__icon md-icon"></span>
            关于
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
    <li class="md-nav__item">
      <a href="../../../about/geren/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    作者个人简介
  </span>
  

      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../about/test/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    功能测试
  </span>
  

      </a>
    </li>
  

          </ul>
        </nav>
      
    </li>
  

  </ul>
</nav>
                  </div>
                </div>
              </div>
            
            
              <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    

<nav class="md-nav md-nav--secondary" aria-label="目录">
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      目录
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#雪花" class="md-nav__link">
    雪花❄️
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#樱花" class="md-nav__link">
    樱花🌸
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#线条" class="md-nav__link">
    线条
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#粒子" class="md-nav__link">
    粒子
  </a>
  
</li>
      
    </ul>
  
</nav>
                  </div>
                </div>
              </div>
            
          
            <div class="md-content" data-md-component="content">
              <article class="md-content__inner md-typeset">
                
                  
<nav class="md-tags" >
  
    
      <a href="../../../tag/#mkdocs" class="md-tag">Mkdocs</a>
    
  
</nav>


    <a href="https://github.com/Wcowin/Mkdocs-Wcowin/edit/main/docs/blog/websitebeauty/backgroud.md" title="编辑此页" class="md-content__button md-icon">
      
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 20H6V4h7v5h5v3.1l2-2V8l-6-6H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h4v-2m10.2-7c.1 0 .3.1.4.2l1.3 1.3c.2.2.2.6 0 .8l-1 1-2.1-2.1 1-1c.1-.1.2-.2.4-.2m0 3.9L14.1 23H12v-2.1l6.1-6.1 2.1 2.1Z"/></svg>
    </a>
  
  
    <a href="https://github.com/Wcowin/Mkdocs-Wcowin/raw/main/docs/blog/websitebeauty/backgroud.md" title="查看本页的源代码" class="md-content__button md-icon">
      
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 18c.56 0 1 .44 1 1s-.44 1-1 1-1-.44-1-1 .44-1 1-1m0-3c-2.73 0-5.06 1.66-6 4 .94 2.34 3.27 4 6 4s5.06-1.66 6-4c-.94-2.34-3.27-4-6-4m0 6.5a2.5 2.5 0 0 1-2.5-2.5 2.5 2.5 0 0 1 2.5-2.5 2.5 2.5 0 0 1 2.5 2.5 2.5 2.5 0 0 1-2.5 2.5M9.27 20H6V4h7v5h5v4.07c.7.08 1.36.25 2 .49V8l-6-6H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h4.5a8.15 8.15 0 0 1-1.23-2Z"/></svg>
    </a>
  

  <h1>背景特效</h1>

<div class="admonition note">
<p class="admonition-title">Note</p>
<p>以下代码均在<code>docs/javascripts/extra.js</code>下复制粘贴</p>
</div>
<!-- <head>
<script src="https://www.lanjie100.com/js/snow.user.js"></script>
</head> -->

<div id="snowflakes-container"></div>
<script>
  // 在LocalStorage中设置不显示雪花效果的标志
  localStorage.setItem('showSnowflakes', 'true');
</script>

<script>
  // 判断LocalStorage中是否设置了显示雪花效果的标志
  if (localStorage.getItem('showSnowflakes') === 'true') {
    var script = document.createElement('script');
    script.src = 'https://www.lanjie100.com/js/snow.user.js';
    document.head.appendChild(script);
  }
</script>

<h2 id="雪花">雪花❄️<a class="headerlink" href="#雪花" title="Permanent link"></a></h2>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-0-1">  1</a></span>
<span class="normal"><a href="#__codelineno-0-2">  2</a></span>
<span class="normal"><a href="#__codelineno-0-3">  3</a></span>
<span class="normal"><a href="#__codelineno-0-4">  4</a></span>
<span class="normal"><a href="#__codelineno-0-5">  5</a></span>
<span class="normal"><a href="#__codelineno-0-6">  6</a></span>
<span class="normal"><a href="#__codelineno-0-7">  7</a></span>
<span class="normal"><a href="#__codelineno-0-8">  8</a></span>
<span class="normal"><a href="#__codelineno-0-9">  9</a></span>
<span class="normal"><a href="#__codelineno-0-10"> 10</a></span>
<span class="normal"><a href="#__codelineno-0-11"> 11</a></span>
<span class="normal"><a href="#__codelineno-0-12"> 12</a></span>
<span class="normal"><a href="#__codelineno-0-13"> 13</a></span>
<span class="normal"><a href="#__codelineno-0-14"> 14</a></span>
<span class="normal"><a href="#__codelineno-0-15"> 15</a></span>
<span class="normal"><a href="#__codelineno-0-16"> 16</a></span>
<span class="normal"><a href="#__codelineno-0-17"> 17</a></span>
<span class="normal"><a href="#__codelineno-0-18"> 18</a></span>
<span class="normal"><a href="#__codelineno-0-19"> 19</a></span>
<span class="normal"><a href="#__codelineno-0-20"> 20</a></span>
<span class="normal"><a href="#__codelineno-0-21"> 21</a></span>
<span class="normal"><a href="#__codelineno-0-22"> 22</a></span>
<span class="normal"><a href="#__codelineno-0-23"> 23</a></span>
<span class="normal"><a href="#__codelineno-0-24"> 24</a></span>
<span class="normal"><a href="#__codelineno-0-25"> 25</a></span>
<span class="normal"><a href="#__codelineno-0-26"> 26</a></span>
<span class="normal"><a href="#__codelineno-0-27"> 27</a></span>
<span class="normal"><a href="#__codelineno-0-28"> 28</a></span>
<span class="normal"><a href="#__codelineno-0-29"> 29</a></span>
<span class="normal"><a href="#__codelineno-0-30"> 30</a></span>
<span class="normal"><a href="#__codelineno-0-31"> 31</a></span>
<span class="normal"><a href="#__codelineno-0-32"> 32</a></span>
<span class="normal"><a href="#__codelineno-0-33"> 33</a></span>
<span class="normal"><a href="#__codelineno-0-34"> 34</a></span>
<span class="normal"><a href="#__codelineno-0-35"> 35</a></span>
<span class="normal"><a href="#__codelineno-0-36"> 36</a></span>
<span class="normal"><a href="#__codelineno-0-37"> 37</a></span>
<span class="normal"><a href="#__codelineno-0-38"> 38</a></span>
<span class="normal"><a href="#__codelineno-0-39"> 39</a></span>
<span class="normal"><a href="#__codelineno-0-40"> 40</a></span>
<span class="normal"><a href="#__codelineno-0-41"> 41</a></span>
<span class="normal"><a href="#__codelineno-0-42"> 42</a></span>
<span class="normal"><a href="#__codelineno-0-43"> 43</a></span>
<span class="normal"><a href="#__codelineno-0-44"> 44</a></span>
<span class="normal"><a href="#__codelineno-0-45"> 45</a></span>
<span class="normal"><a href="#__codelineno-0-46"> 46</a></span>
<span class="normal"><a href="#__codelineno-0-47"> 47</a></span>
<span class="normal"><a href="#__codelineno-0-48"> 48</a></span>
<span class="normal"><a href="#__codelineno-0-49"> 49</a></span>
<span class="normal"><a href="#__codelineno-0-50"> 50</a></span>
<span class="normal"><a href="#__codelineno-0-51"> 51</a></span>
<span class="normal"><a href="#__codelineno-0-52"> 52</a></span>
<span class="normal"><a href="#__codelineno-0-53"> 53</a></span>
<span class="normal"><a href="#__codelineno-0-54"> 54</a></span>
<span class="normal"><a href="#__codelineno-0-55"> 55</a></span>
<span class="normal"><a href="#__codelineno-0-56"> 56</a></span>
<span class="normal"><a href="#__codelineno-0-57"> 57</a></span>
<span class="normal"><a href="#__codelineno-0-58"> 58</a></span>
<span class="normal"><a href="#__codelineno-0-59"> 59</a></span>
<span class="normal"><a href="#__codelineno-0-60"> 60</a></span>
<span class="normal"><a href="#__codelineno-0-61"> 61</a></span>
<span class="normal"><a href="#__codelineno-0-62"> 62</a></span>
<span class="normal"><a href="#__codelineno-0-63"> 63</a></span>
<span class="normal"><a href="#__codelineno-0-64"> 64</a></span>
<span class="normal"><a href="#__codelineno-0-65"> 65</a></span>
<span class="normal"><a href="#__codelineno-0-66"> 66</a></span>
<span class="normal"><a href="#__codelineno-0-67"> 67</a></span>
<span class="normal"><a href="#__codelineno-0-68"> 68</a></span>
<span class="normal"><a href="#__codelineno-0-69"> 69</a></span>
<span class="normal"><a href="#__codelineno-0-70"> 70</a></span>
<span class="normal"><a href="#__codelineno-0-71"> 71</a></span>
<span class="normal"><a href="#__codelineno-0-72"> 72</a></span>
<span class="normal"><a href="#__codelineno-0-73"> 73</a></span>
<span class="normal"><a href="#__codelineno-0-74"> 74</a></span>
<span class="normal"><a href="#__codelineno-0-75"> 75</a></span>
<span class="normal"><a href="#__codelineno-0-76"> 76</a></span>
<span class="normal"><a href="#__codelineno-0-77"> 77</a></span>
<span class="normal"><a href="#__codelineno-0-78"> 78</a></span>
<span class="normal"><a href="#__codelineno-0-79"> 79</a></span>
<span class="normal"><a href="#__codelineno-0-80"> 80</a></span>
<span class="normal"><a href="#__codelineno-0-81"> 81</a></span>
<span class="normal"><a href="#__codelineno-0-82"> 82</a></span>
<span class="normal"><a href="#__codelineno-0-83"> 83</a></span>
<span class="normal"><a href="#__codelineno-0-84"> 84</a></span>
<span class="normal"><a href="#__codelineno-0-85"> 85</a></span>
<span class="normal"><a href="#__codelineno-0-86"> 86</a></span>
<span class="normal"><a href="#__codelineno-0-87"> 87</a></span>
<span class="normal"><a href="#__codelineno-0-88"> 88</a></span>
<span class="normal"><a href="#__codelineno-0-89"> 89</a></span>
<span class="normal"><a href="#__codelineno-0-90"> 90</a></span>
<span class="normal"><a href="#__codelineno-0-91"> 91</a></span>
<span class="normal"><a href="#__codelineno-0-92"> 92</a></span>
<span class="normal"><a href="#__codelineno-0-93"> 93</a></span>
<span class="normal"><a href="#__codelineno-0-94"> 94</a></span>
<span class="normal"><a href="#__codelineno-0-95"> 95</a></span>
<span class="normal"><a href="#__codelineno-0-96"> 96</a></span>
<span class="normal"><a href="#__codelineno-0-97"> 97</a></span>
<span class="normal"><a href="#__codelineno-0-98"> 98</a></span>
<span class="normal"><a href="#__codelineno-0-99"> 99</a></span>
<span class="normal"><a href="#__codelineno-0-100">100</a></span>
<span class="normal"><a href="#__codelineno-0-101">101</a></span>
<span class="normal"><a href="#__codelineno-0-102">102</a></span>
<span class="normal"><a href="#__codelineno-0-103">103</a></span>
<span class="normal"><a href="#__codelineno-0-104">104</a></span>
<span class="normal"><a href="#__codelineno-0-105">105</a></span>
<span class="normal"><a href="#__codelineno-0-106">106</a></span>
<span class="normal"><a href="#__codelineno-0-107">107</a></span>
<span class="normal"><a href="#__codelineno-0-108">108</a></span>
<span class="normal"><a href="#__codelineno-0-109">109</a></span>
<span class="normal"><a href="#__codelineno-0-110">110</a></span>
<span class="normal"><a href="#__codelineno-0-111">111</a></span>
<span class="normal"><a href="#__codelineno-0-112">112</a></span>
<span class="normal"><a href="#__codelineno-0-113">113</a></span>
<span class="normal"><a href="#__codelineno-0-114">114</a></span>
<span class="normal"><a href="#__codelineno-0-115">115</a></span>
<span class="normal"><a href="#__codelineno-0-116">116</a></span>
<span class="normal"><a href="#__codelineno-0-117">117</a></span>
<span class="normal"><a href="#__codelineno-0-118">118</a></span>
<span class="normal"><a href="#__codelineno-0-119">119</a></span>
<span class="normal"><a href="#__codelineno-0-120">120</a></span>
<span class="normal"><a href="#__codelineno-0-121">121</a></span>
<span class="normal"><a href="#__codelineno-0-122">122</a></span>
<span class="normal"><a href="#__codelineno-0-123">123</a></span>
<span class="normal"><a href="#__codelineno-0-124">124</a></span>
<span class="normal"><a href="#__codelineno-0-125">125</a></span>
<span class="normal"><a href="#__codelineno-0-126">126</a></span>
<span class="normal"><a href="#__codelineno-0-127">127</a></span>
<span class="normal"><a href="#__codelineno-0-128">128</a></span>
<span class="normal"><a href="#__codelineno-0-129">129</a></span>
<span class="normal"><a href="#__codelineno-0-130">130</a></span>
<span class="normal"><a href="#__codelineno-0-131">131</a></span>
<span class="normal"><a href="#__codelineno-0-132">132</a></span>
<span class="normal"><a href="#__codelineno-0-133">133</a></span>
<span class="normal"><a href="#__codelineno-0-134">134</a></span>
<span class="normal"><a href="#__codelineno-0-135">135</a></span>
<span class="normal"><a href="#__codelineno-0-136">136</a></span>
<span class="normal"><a href="#__codelineno-0-137">137</a></span>
<span class="normal"><a href="#__codelineno-0-138">138</a></span>
<span class="normal"><a href="#__codelineno-0-139">139</a></span>
<span class="normal"><a href="#__codelineno-0-140">140</a></span>
<span class="normal"><a href="#__codelineno-0-141">141</a></span>
<span class="normal"><a href="#__codelineno-0-142">142</a></span>
<span class="normal"><a href="#__codelineno-0-143">143</a></span>
<span class="normal"><a href="#__codelineno-0-144">144</a></span>
<span class="normal"><a href="#__codelineno-0-145">145</a></span>
<span class="normal"><a href="#__codelineno-0-146">146</a></span>
<span class="normal"><a href="#__codelineno-0-147">147</a></span>
<span class="normal"><a href="#__codelineno-0-148">148</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-0-1" name="__codelineno-0-1"></a><span class="c1">//雪花</span>
<a id="__codelineno-0-2" name="__codelineno-0-2"></a><span class="kd">const</span><span class="w"> </span><span class="nx">fps</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">30</span><span class="p">;</span>
<a id="__codelineno-0-3" name="__codelineno-0-3"></a><span class="kd">const</span><span class="w"> </span><span class="nx">mspf</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="mf">1000</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="nx">fps</span><span class="p">)</span><span class="w"> </span><span class="p">;</span><span class="w"> </span>
<a id="__codelineno-0-4" name="__codelineno-0-4"></a>
<a id="__codelineno-0-5" name="__codelineno-0-5"></a><span class="kd">let</span><span class="w"> </span><span class="nx">width</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">clientWidth</span><span class="p">;</span>
<a id="__codelineno-0-6" name="__codelineno-0-6"></a><span class="kd">let</span><span class="w"> </span><span class="nx">height</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">clientHeight</span><span class="p">;</span>
<a id="__codelineno-0-7" name="__codelineno-0-7"></a><span class="kd">let</span><span class="w"> </span><span class="nx">canvas</span><span class="p">;</span>
<a id="__codelineno-0-8" name="__codelineno-0-8"></a><span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;resize&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-9" name="__codelineno-0-9"></a><span class="w">  </span><span class="nx">width</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">clientWidth</span><span class="p">;</span>
<a id="__codelineno-0-10" name="__codelineno-0-10"></a><span class="w">  </span><span class="nx">height</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">clientHeight</span><span class="p">;</span>
<a id="__codelineno-0-11" name="__codelineno-0-11"></a><span class="w">  </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">canvas</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-12" name="__codelineno-0-12"></a><span class="w">    </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">width</span><span class="p">;</span>
<a id="__codelineno-0-13" name="__codelineno-0-13"></a><span class="w">    </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">height</span><span class="p">;</span>
<a id="__codelineno-0-14" name="__codelineno-0-14"></a><span class="w">  </span><span class="p">}</span>
<a id="__codelineno-0-15" name="__codelineno-0-15"></a><span class="p">});</span>
<a id="__codelineno-0-16" name="__codelineno-0-16"></a>
<a id="__codelineno-0-17" name="__codelineno-0-17"></a><span class="kd">let</span><span class="w"> </span><span class="nx">particles</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[];</span>
<a id="__codelineno-0-18" name="__codelineno-0-18"></a><span class="kd">let</span><span class="w"> </span><span class="nx">wind</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">];</span>
<a id="__codelineno-0-19" name="__codelineno-0-19"></a><span class="kd">let</span><span class="w"> </span><span class="nx">cursor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">];</span>
<a id="__codelineno-0-20" name="__codelineno-0-20"></a>
<a id="__codelineno-0-21" name="__codelineno-0-21"></a><span class="kd">function</span><span class="w"> </span><span class="nx">velocity</span><span class="p">(</span><span class="nx">r</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-22" name="__codelineno-0-22"></a><span class="w">  </span><span class="k">return</span><span class="w"> </span><span class="mf">70</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="nx">r</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">30</span><span class="p">;</span>
<a id="__codelineno-0-23" name="__codelineno-0-23"></a><span class="p">}</span>
<a id="__codelineno-0-24" name="__codelineno-0-24"></a>
<a id="__codelineno-0-25" name="__codelineno-0-25"></a><span class="kd">function</span><span class="w"> </span><span class="nx">sine_component</span><span class="p">(</span><span class="nx">h</span><span class="p">,</span><span class="w"> </span><span class="nx">a</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-26" name="__codelineno-0-26"></a><span class="w">  </span><span class="k">return</span><span class="w"> </span><span class="p">[</span><span class="mf">2</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">PI</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="nx">h</span><span class="p">,</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">a</span><span class="p">,</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="mf">2</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">PI</span><span class="p">];</span><span class="w"> </span><span class="c1">// [frequency, amplitude, phase]</span>
<a id="__codelineno-0-27" name="__codelineno-0-27"></a><span class="p">}</span>
<a id="__codelineno-0-28" name="__codelineno-0-28"></a>
<a id="__codelineno-0-29" name="__codelineno-0-29"></a><span class="kd">function</span><span class="w"> </span><span class="nx">calc_sine</span><span class="p">(</span><span class="nx">components</span><span class="p">,</span><span class="w"> </span><span class="nx">x</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-30" name="__codelineno-0-30"></a><span class="w">  </span><span class="kd">let</span><span class="w"> </span><span class="nx">sum</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span>
<a id="__codelineno-0-31" name="__codelineno-0-31"></a><span class="w">  </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">let</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">components</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="o">++</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-32" name="__codelineno-0-32"></a><span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">f</span><span class="p">,</span><span class="w"> </span><span class="nx">a</span><span class="p">,</span><span class="w"> </span><span class="nx">p</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">components</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
<a id="__codelineno-0-33" name="__codelineno-0-33"></a><span class="w">    </span><span class="nx">sum</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">sin</span><span class="p">(</span><span class="nx">x</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">f</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">p</span><span class="p">)</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">a</span><span class="p">;</span>
<a id="__codelineno-0-34" name="__codelineno-0-34"></a><span class="w">  </span><span class="p">}</span>
<a id="__codelineno-0-35" name="__codelineno-0-35"></a><span class="w">  </span><span class="k">return</span><span class="w"> </span><span class="nx">sum</span><span class="p">;</span>
<a id="__codelineno-0-36" name="__codelineno-0-36"></a><span class="p">}</span>
<a id="__codelineno-0-37" name="__codelineno-0-37"></a>
<a id="__codelineno-0-38" name="__codelineno-0-38"></a><span class="kd">function</span><span class="w"> </span><span class="nx">gen_particle</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-39" name="__codelineno-0-39"></a><span class="w">  </span><span class="kd">let</span><span class="w"> </span><span class="nx">r</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="mf">4</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">1</span><span class="p">;</span>
<a id="__codelineno-0-40" name="__codelineno-0-40"></a><span class="w">  </span><span class="k">return</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-41" name="__codelineno-0-41"></a><span class="w">    </span><span class="nx">radius</span><span class="o">:</span><span class="w"> </span><span class="nx">r</span><span class="p">,</span>
<a id="__codelineno-0-42" name="__codelineno-0-42"></a><span class="w">    </span><span class="nx">x</span><span class="o">:</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">width</span><span class="p">,</span>
<a id="__codelineno-0-43" name="__codelineno-0-43"></a><span class="w">    </span><span class="nx">y</span><span class="o">:</span><span class="w"> </span><span class="o">-</span><span class="nx">r</span><span class="p">,</span>
<a id="__codelineno-0-44" name="__codelineno-0-44"></a><span class="w">    </span><span class="nx">opacity</span><span class="o">:</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">(),</span>
<a id="__codelineno-0-45" name="__codelineno-0-45"></a><span class="w">    </span><span class="nx">sine_components</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="nx">sine_component</span><span class="p">(</span><span class="nx">height</span><span class="p">,</span><span class="w"> </span><span class="mf">3</span><span class="p">),</span><span class="w"> </span><span class="nx">sine_component</span><span class="p">(</span><span class="nx">height</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="mf">2</span><span class="p">,</span><span class="w"> </span><span class="mf">2</span><span class="p">),</span><span class="w"> </span><span class="nx">sine_component</span><span class="p">(</span><span class="nx">height</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="mf">5</span><span class="p">,</span><span class="w"> </span><span class="mf">1</span><span class="p">),</span><span class="w"> </span><span class="nx">sine_component</span><span class="p">(</span><span class="nx">height</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="mf">10</span><span class="p">,</span><span class="w"> </span><span class="mf">0.5</span><span class="p">)],</span>
<a id="__codelineno-0-46" name="__codelineno-0-46"></a><span class="w">  </span><span class="p">};</span>
<a id="__codelineno-0-47" name="__codelineno-0-47"></a><span class="p">}</span>
<a id="__codelineno-0-48" name="__codelineno-0-48"></a>
<a id="__codelineno-0-49" name="__codelineno-0-49"></a><span class="kd">function</span><span class="w"> </span><span class="nx">update_pos</span><span class="p">(</span><span class="nx">dt</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-50" name="__codelineno-0-50"></a><span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">n</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">particles</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
<a id="__codelineno-0-51" name="__codelineno-0-51"></a><span class="w">  </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">let</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">n</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="o">++</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-52" name="__codelineno-0-52"></a><span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="nx">v</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">velocity</span><span class="p">(</span><span class="nx">particles</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">radius</span><span class="p">);</span>
<a id="__codelineno-0-53" name="__codelineno-0-53"></a><span class="w">    </span><span class="nx">particles</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">x</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="nx">calc_sine</span><span class="p">(</span><span class="nx">particles</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">sine_components</span><span class="p">,</span><span class="w"> </span><span class="nx">particles</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">y</span><span class="p">)</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">v</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="mf">5</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">dt</span><span class="p">;</span>
<a id="__codelineno-0-54" name="__codelineno-0-54"></a><span class="w">    </span><span class="nx">particles</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">y</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="nx">v</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">dt</span><span class="p">;</span>
<a id="__codelineno-0-55" name="__codelineno-0-55"></a>
<a id="__codelineno-0-56" name="__codelineno-0-56"></a><span class="w">    </span><span class="c1">// const dist = Math.hypot(particles[i].x - cursor[0], particles[i].y - cursor[1]) + 1;</span>
<a id="__codelineno-0-57" name="__codelineno-0-57"></a><span class="w">    </span><span class="c1">// particles[i].x += wind[0] * dt / dist</span>
<a id="__codelineno-0-58" name="__codelineno-0-58"></a><span class="w">    </span><span class="c1">// particles[i].y += wind[1] * dt / dist;</span>
<a id="__codelineno-0-59" name="__codelineno-0-59"></a>
<a id="__codelineno-0-60" name="__codelineno-0-60"></a><span class="w">    </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">particles</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">y</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">particles</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">radius</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="nx">height</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-61" name="__codelineno-0-61"></a><span class="w">      </span><span class="nx">particles</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">gen_particle</span><span class="p">();</span><span class="w">  </span>
<a id="__codelineno-0-62" name="__codelineno-0-62"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-0-63" name="__codelineno-0-63"></a><span class="w">  </span><span class="p">}</span>
<a id="__codelineno-0-64" name="__codelineno-0-64"></a><span class="p">}</span>
<a id="__codelineno-0-65" name="__codelineno-0-65"></a>
<a id="__codelineno-0-66" name="__codelineno-0-66"></a><span class="kd">let</span><span class="w"> </span><span class="nx">context_cache</span><span class="p">;</span>
<a id="__codelineno-0-67" name="__codelineno-0-67"></a><span class="kd">function</span><span class="w"> </span><span class="nx">get_context</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-68" name="__codelineno-0-68"></a><span class="w">  </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">context_cache</span><span class="p">)</span>
<a id="__codelineno-0-69" name="__codelineno-0-69"></a><span class="w">    </span><span class="k">return</span><span class="w"> </span><span class="nx">context_cache</span><span class="p">;</span>
<a id="__codelineno-0-70" name="__codelineno-0-70"></a>
<a id="__codelineno-0-71" name="__codelineno-0-71"></a><span class="w">  </span><span class="nx">canvas</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;canvas&#39;</span><span class="p">);</span>
<a id="__codelineno-0-72" name="__codelineno-0-72"></a><span class="w">  </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">id</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;snow-canvas&#39;</span><span class="p">;</span>
<a id="__codelineno-0-73" name="__codelineno-0-73"></a><span class="w">  </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">width</span><span class="p">;</span>
<a id="__codelineno-0-74" name="__codelineno-0-74"></a><span class="w">  </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">height</span><span class="p">;</span>
<a id="__codelineno-0-75" name="__codelineno-0-75"></a><span class="w">  </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">style</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;position: fixed; top: 0; left: 0; overflow: hidden; pointer-events: none; z-index: 256;&#39;</span><span class="p">;</span>
<a id="__codelineno-0-76" name="__codelineno-0-76"></a><span class="w">  </span><span class="k">if</span><span class="w"> </span><span class="p">((</span><span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">darkreaderMode</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="s2">&quot;&quot;</span><span class="p">).</span><span class="nx">startsWith</span><span class="p">(</span><span class="s1">&#39;filter&#39;</span><span class="p">))</span>
<a id="__codelineno-0-77" name="__codelineno-0-77"></a><span class="w">    </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">filter</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;invert(1)&#39;</span><span class="p">;</span>
<a id="__codelineno-0-78" name="__codelineno-0-78"></a><span class="w">  </span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">canvas</span><span class="p">);</span>
<a id="__codelineno-0-79" name="__codelineno-0-79"></a>
<a id="__codelineno-0-80" name="__codelineno-0-80"></a><span class="w">  </span><span class="nx">context_cache</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s1">&#39;2d&#39;</span><span class="p">);</span>
<a id="__codelineno-0-81" name="__codelineno-0-81"></a><span class="w">  </span><span class="k">return</span><span class="w"> </span><span class="nx">context_cache</span><span class="p">;</span>
<a id="__codelineno-0-82" name="__codelineno-0-82"></a><span class="p">}</span>
<a id="__codelineno-0-83" name="__codelineno-0-83"></a>
<a id="__codelineno-0-84" name="__codelineno-0-84"></a><span class="kd">function</span><span class="w"> </span><span class="nx">draw</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-85" name="__codelineno-0-85"></a><span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">get_context</span><span class="p">();</span>
<a id="__codelineno-0-86" name="__codelineno-0-86"></a>
<a id="__codelineno-0-87" name="__codelineno-0-87"></a><span class="w">  </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">clearRect</span><span class="p">(</span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="nx">width</span><span class="p">,</span><span class="w"> </span><span class="nx">height</span><span class="p">);</span>
<a id="__codelineno-0-88" name="__codelineno-0-88"></a>
<a id="__codelineno-0-89" name="__codelineno-0-89"></a><span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">n</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">particles</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
<a id="__codelineno-0-90" name="__codelineno-0-90"></a><span class="w">  </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">let</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">n</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="o">++</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-91" name="__codelineno-0-91"></a><span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="nx">p</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">particles</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
<a id="__codelineno-0-92" name="__codelineno-0-92"></a><span class="w">    </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">fillStyle</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="sb">`rgba(255, 255, 255, </span><span class="si">${</span><span class="nx">p</span><span class="p">.</span><span class="nx">opacity</span><span class="si">}</span><span class="sb">)`</span><span class="p">;</span>
<a id="__codelineno-0-93" name="__codelineno-0-93"></a><span class="w">    </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">shadowColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;#80EDF7&#39;</span><span class="p">;</span>
<a id="__codelineno-0-94" name="__codelineno-0-94"></a><span class="w">    </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">shadowBlur</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">7</span><span class="p">;</span>
<a id="__codelineno-0-95" name="__codelineno-0-95"></a><span class="w">    </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">beginPath</span><span class="p">();</span>
<a id="__codelineno-0-96" name="__codelineno-0-96"></a><span class="w">    </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">arc</span><span class="p">(</span><span class="nx">p</span><span class="p">.</span><span class="nx">x</span><span class="p">,</span><span class="w"> </span><span class="nx">p</span><span class="p">.</span><span class="nx">y</span><span class="p">,</span><span class="w"> </span><span class="nx">p</span><span class="p">.</span><span class="nx">radius</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">2</span><span class="o">*</span><span class="nb">Math</span><span class="p">.</span><span class="nx">PI</span><span class="p">);</span>
<a id="__codelineno-0-97" name="__codelineno-0-97"></a><span class="w">    </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">fill</span><span class="p">();</span>
<a id="__codelineno-0-98" name="__codelineno-0-98"></a><span class="w">  </span><span class="p">}</span>
<a id="__codelineno-0-99" name="__codelineno-0-99"></a><span class="p">}</span>
<a id="__codelineno-0-100" name="__codelineno-0-100"></a>
<a id="__codelineno-0-101" name="__codelineno-0-101"></a><span class="kd">let</span><span class="w"> </span><span class="nx">focused</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">true</span><span class="p">;</span>
<a id="__codelineno-0-102" name="__codelineno-0-102"></a><span class="kd">let</span><span class="w"> </span><span class="nx">disabled</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">false</span><span class="p">;</span>
<a id="__codelineno-0-103" name="__codelineno-0-103"></a><span class="kd">let</span><span class="w"> </span><span class="nx">lastTime</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">performance</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<a id="__codelineno-0-104" name="__codelineno-0-104"></a><span class="kd">const</span><span class="w"> </span><span class="nx">requestFrame</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">setTimeout</span><span class="p">(</span><span class="nx">loop</span><span class="p">,</span><span class="w"> </span><span class="nx">mspf</span><span class="p">);</span>
<a id="__codelineno-0-105" name="__codelineno-0-105"></a><span class="kd">function</span><span class="w"> </span><span class="nx">loop</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-106" name="__codelineno-0-106"></a><span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">dt</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">performance</span><span class="p">.</span><span class="nx">now</span><span class="p">()</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">lastTime</span><span class="p">)</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="mf">1000</span><span class="p">;</span>
<a id="__codelineno-0-107" name="__codelineno-0-107"></a>
<a id="__codelineno-0-108" name="__codelineno-0-108"></a><span class="w">  </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">particles</span><span class="p">.</span><span class="nx">length</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="mf">120</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="mf">0.1</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-109" name="__codelineno-0-109"></a><span class="w">    </span><span class="nx">particles</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">gen_particle</span><span class="p">());</span>
<a id="__codelineno-0-110" name="__codelineno-0-110"></a><span class="w">  </span><span class="p">}</span>
<a id="__codelineno-0-111" name="__codelineno-0-111"></a>
<a id="__codelineno-0-112" name="__codelineno-0-112"></a><span class="w">  </span><span class="nx">update_pos</span><span class="p">(</span><span class="nx">dt</span><span class="p">);</span>
<a id="__codelineno-0-113" name="__codelineno-0-113"></a><span class="w">  </span><span class="nx">draw</span><span class="p">();</span>
<a id="__codelineno-0-114" name="__codelineno-0-114"></a>
<a id="__codelineno-0-115" name="__codelineno-0-115"></a><span class="w">  </span><span class="nx">lastTime</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">performance</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<a id="__codelineno-0-116" name="__codelineno-0-116"></a><span class="w">  </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">focused</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="o">!</span><span class="nx">disabled</span><span class="p">)</span>
<a id="__codelineno-0-117" name="__codelineno-0-117"></a><span class="w">    </span><span class="nx">requestFrame</span><span class="p">();</span>
<a id="__codelineno-0-118" name="__codelineno-0-118"></a><span class="p">}</span>
<a id="__codelineno-0-119" name="__codelineno-0-119"></a>
<a id="__codelineno-0-120" name="__codelineno-0-120"></a>
<a id="__codelineno-0-121" name="__codelineno-0-121"></a><span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;focus&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-122" name="__codelineno-0-122"></a><span class="w">  </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;snow start&#39;</span><span class="p">);</span>
<a id="__codelineno-0-123" name="__codelineno-0-123"></a><span class="w">  </span><span class="nx">focused</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">true</span><span class="p">;</span>
<a id="__codelineno-0-124" name="__codelineno-0-124"></a><span class="w">  </span><span class="nx">lastTime</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">performance</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<a id="__codelineno-0-125" name="__codelineno-0-125"></a><span class="w">  </span><span class="nx">requestFrame</span><span class="p">();</span>
<a id="__codelineno-0-126" name="__codelineno-0-126"></a><span class="p">});</span>
<a id="__codelineno-0-127" name="__codelineno-0-127"></a>
<a id="__codelineno-0-128" name="__codelineno-0-128"></a><span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;blur&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-129" name="__codelineno-0-129"></a><span class="w">  </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;snow stop&#39;</span><span class="p">);</span>
<a id="__codelineno-0-130" name="__codelineno-0-130"></a><span class="w">  </span><span class="nx">focused</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">false</span><span class="p">;</span>
<a id="__codelineno-0-131" name="__codelineno-0-131"></a><span class="p">});</span>
<a id="__codelineno-0-132" name="__codelineno-0-132"></a>
<a id="__codelineno-0-133" name="__codelineno-0-133"></a><span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;keydown&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">e</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-134" name="__codelineno-0-134"></a><span class="w">  </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">ctrlKey</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span><span class="w"> </span><span class="o">==</span><span class="w"> </span><span class="s1">&#39;s&#39;</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-135" name="__codelineno-0-135"></a><span class="w">    </span><span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<a id="__codelineno-0-136" name="__codelineno-0-136"></a><span class="w">    </span><span class="nx">disabled</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="o">!</span><span class="nx">disabled</span><span class="p">;</span>
<a id="__codelineno-0-137" name="__codelineno-0-137"></a><span class="w">    </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">disabled</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-138" name="__codelineno-0-138"></a><span class="w">      </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;none&#39;</span><span class="p">;</span>
<a id="__codelineno-0-139" name="__codelineno-0-139"></a><span class="w">    </span><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-140" name="__codelineno-0-140"></a><span class="w">      </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;block&#39;</span><span class="p">;</span>
<a id="__codelineno-0-141" name="__codelineno-0-141"></a><span class="w">      </span><span class="nx">lastTime</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">performance</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<a id="__codelineno-0-142" name="__codelineno-0-142"></a><span class="w">      </span><span class="nx">requestFrame</span><span class="p">();</span>
<a id="__codelineno-0-143" name="__codelineno-0-143"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-0-144" name="__codelineno-0-144"></a><span class="w">  </span><span class="p">}</span>
<a id="__codelineno-0-145" name="__codelineno-0-145"></a><span class="p">});</span>
<a id="__codelineno-0-146" name="__codelineno-0-146"></a>
<a id="__codelineno-0-147" name="__codelineno-0-147"></a><span class="nx">requestFrame</span><span class="p">();</span>
<a id="__codelineno-0-148" name="__codelineno-0-148"></a><span class="c1">//雪花</span>
</code></pre></div></td></tr></table></div>
<hr />
<h2 id="樱花">樱花🌸<a class="headerlink" href="#樱花" title="Permanent link"></a></h2>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-1-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-1-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-1-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-1-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-1-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-1-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-1-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-1-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-1-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-1-10">10</a></span>
<span class="normal"><a href="#__codelineno-1-11">11</a></span>
<span class="normal"><a href="#__codelineno-1-12">12</a></span>
<span class="normal"><a href="#__codelineno-1-13">13</a></span>
<span class="normal"><a href="#__codelineno-1-14">14</a></span>
<span class="normal"><a href="#__codelineno-1-15">15</a></span>
<span class="normal"><a href="#__codelineno-1-16">16</a></span>
<span class="normal"><a href="#__codelineno-1-17">17</a></span>
<span class="normal"><a href="#__codelineno-1-18">18</a></span>
<span class="normal"><a href="#__codelineno-1-19">19</a></span>
<span class="normal"><a href="#__codelineno-1-20">20</a></span>
<span class="normal"><a href="#__codelineno-1-21">21</a></span>
<span class="normal"><a href="#__codelineno-1-22">22</a></span>
<span class="normal"><a href="#__codelineno-1-23">23</a></span>
<span class="normal"><a href="#__codelineno-1-24">24</a></span>
<span class="normal"><a href="#__codelineno-1-25">25</a></span>
<span class="normal"><a href="#__codelineno-1-26">26</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-1-1" name="__codelineno-1-1"></a><span class="c1">//樱花</span>
<a id="__codelineno-1-2" name="__codelineno-1-2"></a><span class="nx">Sakura</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">draw</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">(</span><span class="nx">cxt</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-1-3" name="__codelineno-1-3"></a><span class="w">    </span><span class="nx">cxt</span><span class="p">.</span><span class="nx">save</span><span class="p">();</span><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">xc</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">40</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">s</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="mf">4</span><span class="p">;</span><span class="w"> </span><span class="nx">cxt</span><span class="p">.</span><span class="nx">translate</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">x</span><span class="p">,</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">y</span><span class="p">);</span><span class="w"> </span><span class="nx">cxt</span><span class="p">.</span><span class="nx">rotate</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">r</span><span class="p">);</span><span class="w"> </span><span class="nx">cxt</span><span class="p">.</span><span class="nx">drawImage</span><span class="p">(</span><span class="nx">img</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">40</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">s</span><span class="p">,</span><span class="w"> </span><span class="mf">40</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">s</span><span class="p">)</span>
<a id="__codelineno-1-4" name="__codelineno-1-4"></a><span class="w">    </span><span class="nx">cxt</span><span class="p">.</span><span class="nx">restore</span><span class="p">();</span>
<a id="__codelineno-1-5" name="__codelineno-1-5"></a><span class="p">}</span>
<a id="__codelineno-1-6" name="__codelineno-1-6"></a><span class="nx">Sakura</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">update</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">x</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">x</span><span class="p">,</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">y</span><span class="p">);</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">y</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">y</span><span class="p">,</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">y</span><span class="p">);</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">r</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">r</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">r</span><span class="p">);</span><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="mf">0</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="mf">0</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">r</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getRandom</span><span class="p">(</span><span class="s1">&#39;fnr&#39;</span><span class="p">);</span><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="mf">0.4</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getRandom</span><span class="p">(</span><span class="s1">&#39;x&#39;</span><span class="p">);</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">s</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getRandom</span><span class="p">(</span><span class="s1">&#39;s&#39;</span><span class="p">);</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">r</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getRandom</span><span class="p">(</span><span class="s1">&#39;r&#39;</span><span class="p">);</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="p">;</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getRandom</span><span class="p">(</span><span class="s1">&#39;y&#39;</span><span class="p">);</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">s</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getRandom</span><span class="p">(</span><span class="s1">&#39;s&#39;</span><span class="p">);</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">r</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getRandom</span><span class="p">(</span><span class="s1">&#39;r&#39;</span><span class="p">);</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-1-7" name="__codelineno-1-7"></a><span class="nx">SakuraList</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">list</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[];</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-1-8" name="__codelineno-1-8"></a><span class="nx">SakuraList</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">push</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">(</span><span class="nx">sakura</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">list</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">sakura</span><span class="p">);</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-1-9" name="__codelineno-1-9"></a><span class="nx">SakuraList</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">update</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">var</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="nx">len</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">list</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">len</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="o">++</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">list</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">update</span><span class="p">();</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-1-10" name="__codelineno-1-10"></a><span class="nx">SakuraList</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">draw</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">(</span><span class="nx">cxt</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">var</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="nx">len</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">list</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">len</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="o">++</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">list</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">draw</span><span class="p">(</span><span class="nx">cxt</span><span class="p">);</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-1-11" name="__codelineno-1-11"></a><span class="nx">SakuraList</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">get</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">(</span><span class="nx">i</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">list</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-1-12" name="__codelineno-1-12"></a><span class="nx">SakuraList</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">size</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">list</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-1-13" name="__codelineno-1-13"></a><span class="kd">function</span><span class="w"> </span><span class="nx">getRandom</span><span class="p">(</span><span class="nx">option</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-1-14" name="__codelineno-1-14"></a><span class="w">    </span><span class="kd">var</span><span class="w"> </span><span class="nx">ret</span><span class="p">,</span><span class="w"> </span><span class="nx">random</span><span class="p">;</span><span class="w"> </span><span class="k">switch</span><span class="w"> </span><span class="p">(</span><span class="nx">option</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-1-15" name="__codelineno-1-15"></a><span class="w">        </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;x&#39;</span><span class="o">:</span><span class="w"> </span><span class="nx">ret</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="p">;</span><span class="w"> </span><span class="k">break</span><span class="p">;</span><span class="w"> </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;y&#39;</span><span class="o">:</span><span class="w"> </span><span class="nx">ret</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span><span class="p">;</span><span class="w"> </span><span class="k">break</span><span class="p">;</span><span class="w"> </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;s&#39;</span><span class="o">:</span><span class="w"> </span><span class="nx">ret</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">();</span><span class="w"> </span><span class="k">break</span><span class="p">;</span><span class="w"> </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;r&#39;</span><span class="o">:</span><span class="w"> </span><span class="nx">ret</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="mf">6</span><span class="p">;</span><span class="w"> </span><span class="k">break</span><span class="p">;</span><span class="w"> </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;fnx&#39;</span><span class="o">:</span><span class="w"> </span><span class="nx">random</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="o">-</span><span class="mf">0.5</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="mf">1</span><span class="p">;</span><span class="w"> </span><span class="nx">ret</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">(</span><span class="nx">x</span><span class="p">,</span><span class="w"> </span><span class="nx">y</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">x</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">0.5</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">random</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="mf">1.7</span><span class="p">;</span><span class="w"> </span><span class="p">};</span><span class="w"> </span><span class="k">break</span><span class="p">;</span><span class="w"> </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;fny&#39;</span><span class="o">:</span><span class="w"> </span><span class="nx">random</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">1.5</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="mf">0.7</span>
<a id="__codelineno-1-16" name="__codelineno-1-16"></a><span class="w">            </span><span class="nx">ret</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">(</span><span class="nx">x</span><span class="p">,</span><span class="w"> </span><span class="nx">y</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">y</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">random</span><span class="p">;</span><span class="w"> </span><span class="p">};</span><span class="w"> </span><span class="k">break</span><span class="p">;</span><span class="w"> </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;fnr&#39;</span><span class="o">:</span><span class="w"> </span><span class="nx">random</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="mf">0.03</span><span class="p">;</span><span class="w"> </span><span class="nx">ret</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">(</span><span class="nx">r</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">r</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">random</span><span class="p">;</span><span class="w"> </span><span class="p">};</span><span class="w"> </span><span class="k">break</span><span class="p">;</span>
<a id="__codelineno-1-17" name="__codelineno-1-17"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-1-18" name="__codelineno-1-18"></a><span class="w">    </span><span class="k">return</span><span class="w"> </span><span class="nx">ret</span><span class="p">;</span>
<a id="__codelineno-1-19" name="__codelineno-1-19"></a><span class="p">}</span>
<a id="__codelineno-1-20" name="__codelineno-1-20"></a><span class="kd">function</span><span class="w"> </span><span class="nx">startSakura</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-1-21" name="__codelineno-1-21"></a><span class="w">    </span><span class="nx">requestAnimationFrame</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">requestAnimationFrame</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">mozRequestAnimationFrame</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">webkitRequestAnimationFrame</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">msRequestAnimationFrame</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">oRequestAnimationFrame</span><span class="p">;</span><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">canvas</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;canvas&#39;</span><span class="p">),</span><span class="w"> </span><span class="nx">cxt</span><span class="p">;</span><span class="w"> </span><span class="nx">staticx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">true</span><span class="p">;</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span><span class="p">;</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="p">;</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;style&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;position: fixed;left: 0;top: 0;pointer-events: none;&#39;</span><span class="p">);</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;id&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;canvas_sakura&#39;</span><span class="p">);</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">&#39;body&#39;</span><span class="p">)[</span><span class="mf">0</span><span class="p">].</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">canvas</span><span class="p">);</span><span class="w"> </span><span class="nx">cxt</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s1">&#39;2d&#39;</span><span class="p">);</span><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">sakuraList</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">SakuraList</span><span class="p">();</span><span class="w"> </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">var</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="mf">50</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="o">++</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">sakura</span><span class="p">,</span><span class="w"> </span><span class="nx">randomX</span><span class="p">,</span><span class="w"> </span><span class="nx">randomY</span><span class="p">,</span><span class="w"> </span><span class="nx">randomS</span><span class="p">,</span><span class="w"> </span><span class="nx">randomR</span><span class="p">,</span><span class="w"> </span><span class="nx">randomFnx</span><span class="p">,</span><span class="w"> </span><span class="nx">randomFny</span><span class="p">;</span><span class="w"> </span><span class="nx">randomX</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getRandom</span><span class="p">(</span><span class="s1">&#39;x&#39;</span><span class="p">);</span><span class="w"> </span><span class="nx">randomY</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getRandom</span><span class="p">(</span><span class="s1">&#39;y&#39;</span><span class="p">);</span><span class="w"> </span><span class="nx">randomR</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getRandom</span><span class="p">(</span><span class="s1">&#39;r&#39;</span><span class="p">);</span><span class="w"> </span><span class="nx">randomS</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getRandom</span><span class="p">(</span><span class="s1">&#39;s&#39;</span><span class="p">);</span><span class="w"> </span><span class="nx">randomFnx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getRandom</span><span class="p">(</span><span class="s1">&#39;fnx&#39;</span><span class="p">);</span><span class="w"> </span><span class="nx">randomFny</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getRandom</span><span class="p">(</span><span class="s1">&#39;fny&#39;</span><span class="p">);</span><span class="w"> </span><span class="nx">randomFnR</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getRandom</span><span class="p">(</span><span class="s1">&#39;fnr&#39;</span><span class="p">);</span><span class="w"> </span><span class="nx">sakura</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">Sakura</span><span class="p">(</span><span class="nx">randomX</span><span class="p">,</span><span class="w"> </span><span class="nx">randomY</span><span class="p">,</span><span class="w"> </span><span class="nx">randomS</span><span class="p">,</span><span class="w"> </span><span class="nx">randomR</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">x</span><span class="o">:</span><span class="w"> </span><span class="nx">randomFnx</span><span class="p">,</span><span class="w"> </span><span class="nx">y</span><span class="o">:</span><span class="w"> </span><span class="nx">randomFny</span><span class="p">,</span><span class="w"> </span><span class="nx">r</span><span class="o">:</span><span class="w"> </span><span class="nx">randomFnR</span><span class="w"> </span><span class="p">});</span><span class="w"> </span><span class="nx">sakura</span><span class="p">.</span><span class="nx">draw</span><span class="p">(</span><span class="nx">cxt</span><span class="p">);</span><span class="w"> </span><span class="nx">sakuraList</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">sakura</span><span class="p">);</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-1-22" name="__codelineno-1-22"></a><span class="w">    </span><span class="nx">stop</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">requestAnimationFrame</span><span class="p">(</span><span class="kd">function</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">cxt</span><span class="p">.</span><span class="nx">clearRect</span><span class="p">(</span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span><span class="p">,</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span><span class="p">);</span><span class="w"> </span><span class="nx">sakuraList</span><span class="p">.</span><span class="nx">update</span><span class="p">();</span><span class="w"> </span><span class="nx">sakuraList</span><span class="p">.</span><span class="nx">draw</span><span class="p">(</span><span class="nx">cxt</span><span class="p">);</span><span class="w"> </span><span class="nx">stop</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">requestAnimationFrame</span><span class="p">(</span><span class="nx">arguments</span><span class="p">.</span><span class="nx">callee</span><span class="p">);</span><span class="w"> </span><span class="p">})</span>
<a id="__codelineno-1-23" name="__codelineno-1-23"></a><span class="p">}</span>
<a id="__codelineno-1-24" name="__codelineno-1-24"></a><span class="nb">window</span><span class="p">.</span><span class="nx">onresize</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">canvasSnow</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;canvas_snow&#39;</span><span class="p">);</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-1-25" name="__codelineno-1-25"></a><span class="nx">img</span><span class="p">.</span><span class="nx">onload</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">startSakura</span><span class="p">();</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-1-26" name="__codelineno-1-26"></a><span class="c1">//樱花</span>
</code></pre></div></td></tr></table></div>
<h2 id="线条">线条<a class="headerlink" href="#线条" title="Permanent link"></a></h2>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-2-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-2-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-2-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-2-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-2-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-2-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-2-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-2-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-2-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-2-10">10</a></span>
<span class="normal"><a href="#__codelineno-2-11">11</a></span>
<span class="normal"><a href="#__codelineno-2-12">12</a></span>
<span class="normal"><a href="#__codelineno-2-13">13</a></span>
<span class="normal"><a href="#__codelineno-2-14">14</a></span>
<span class="normal"><a href="#__codelineno-2-15">15</a></span>
<span class="normal"><a href="#__codelineno-2-16">16</a></span>
<span class="normal"><a href="#__codelineno-2-17">17</a></span>
<span class="normal"><a href="#__codelineno-2-18">18</a></span>
<span class="normal"><a href="#__codelineno-2-19">19</a></span>
<span class="normal"><a href="#__codelineno-2-20">20</a></span>
<span class="normal"><a href="#__codelineno-2-21">21</a></span>
<span class="normal"><a href="#__codelineno-2-22">22</a></span>
<span class="normal"><a href="#__codelineno-2-23">23</a></span>
<span class="normal"><a href="#__codelineno-2-24">24</a></span>
<span class="normal"><a href="#__codelineno-2-25">25</a></span>
<span class="normal"><a href="#__codelineno-2-26">26</a></span>
<span class="normal"><a href="#__codelineno-2-27">27</a></span>
<span class="normal"><a href="#__codelineno-2-28">28</a></span>
<span class="normal"><a href="#__codelineno-2-29">29</a></span>
<span class="normal"><a href="#__codelineno-2-30">30</a></span>
<span class="normal"><a href="#__codelineno-2-31">31</a></span>
<span class="normal"><a href="#__codelineno-2-32">32</a></span>
<span class="normal"><a href="#__codelineno-2-33">33</a></span>
<span class="normal"><a href="#__codelineno-2-34">34</a></span>
<span class="normal"><a href="#__codelineno-2-35">35</a></span>
<span class="normal"><a href="#__codelineno-2-36">36</a></span>
<span class="normal"><a href="#__codelineno-2-37">37</a></span>
<span class="normal"><a href="#__codelineno-2-38">38</a></span>
<span class="normal"><a href="#__codelineno-2-39">39</a></span>
<span class="normal"><a href="#__codelineno-2-40">40</a></span>
<span class="normal"><a href="#__codelineno-2-41">41</a></span>
<span class="normal"><a href="#__codelineno-2-42">42</a></span>
<span class="normal"><a href="#__codelineno-2-43">43</a></span>
<span class="normal"><a href="#__codelineno-2-44">44</a></span>
<span class="normal"><a href="#__codelineno-2-45">45</a></span>
<span class="normal"><a href="#__codelineno-2-46">46</a></span>
<span class="normal"><a href="#__codelineno-2-47">47</a></span>
<span class="normal"><a href="#__codelineno-2-48">48</a></span>
<span class="normal"><a href="#__codelineno-2-49">49</a></span>
<span class="normal"><a href="#__codelineno-2-50">50</a></span>
<span class="normal"><a href="#__codelineno-2-51">51</a></span>
<span class="normal"><a href="#__codelineno-2-52">52</a></span>
<span class="normal"><a href="#__codelineno-2-53">53</a></span>
<span class="normal"><a href="#__codelineno-2-54">54</a></span>
<span class="normal"><a href="#__codelineno-2-55">55</a></span>
<span class="normal"><a href="#__codelineno-2-56">56</a></span>
<span class="normal"><a href="#__codelineno-2-57">57</a></span>
<span class="normal"><a href="#__codelineno-2-58">58</a></span>
<span class="normal"><a href="#__codelineno-2-59">59</a></span>
<span class="normal"><a href="#__codelineno-2-60">60</a></span>
<span class="normal"><a href="#__codelineno-2-61">61</a></span>
<span class="normal"><a href="#__codelineno-2-62">62</a></span>
<span class="normal"><a href="#__codelineno-2-63">63</a></span>
<span class="normal"><a href="#__codelineno-2-64">64</a></span>
<span class="normal"><a href="#__codelineno-2-65">65</a></span>
<span class="normal"><a href="#__codelineno-2-66">66</a></span>
<span class="normal"><a href="#__codelineno-2-67">67</a></span>
<span class="normal"><a href="#__codelineno-2-68">68</a></span>
<span class="normal"><a href="#__codelineno-2-69">69</a></span>
<span class="normal"><a href="#__codelineno-2-70">70</a></span>
<span class="normal"><a href="#__codelineno-2-71">71</a></span>
<span class="normal"><a href="#__codelineno-2-72">72</a></span>
<span class="normal"><a href="#__codelineno-2-73">73</a></span>
<span class="normal"><a href="#__codelineno-2-74">74</a></span>
<span class="normal"><a href="#__codelineno-2-75">75</a></span>
<span class="normal"><a href="#__codelineno-2-76">76</a></span>
<span class="normal"><a href="#__codelineno-2-77">77</a></span>
<span class="normal"><a href="#__codelineno-2-78">78</a></span>
<span class="normal"><a href="#__codelineno-2-79">79</a></span>
<span class="normal"><a href="#__codelineno-2-80">80</a></span>
<span class="normal"><a href="#__codelineno-2-81">81</a></span>
<span class="normal"><a href="#__codelineno-2-82">82</a></span>
<span class="normal"><a href="#__codelineno-2-83">83</a></span>
<span class="normal"><a href="#__codelineno-2-84">84</a></span>
<span class="normal"><a href="#__codelineno-2-85">85</a></span>
<span class="normal"><a href="#__codelineno-2-86">86</a></span>
<span class="normal"><a href="#__codelineno-2-87">87</a></span>
<span class="normal"><a href="#__codelineno-2-88">88</a></span>
<span class="normal"><a href="#__codelineno-2-89">89</a></span>
<span class="normal"><a href="#__codelineno-2-90">90</a></span>
<span class="normal"><a href="#__codelineno-2-91">91</a></span>
<span class="normal"><a href="#__codelineno-2-92">92</a></span>
<span class="normal"><a href="#__codelineno-2-93">93</a></span>
<span class="normal"><a href="#__codelineno-2-94">94</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-2-1" name="__codelineno-2-1"></a><span class="o">!</span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-2" name="__codelineno-2-2"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">o</span><span class="p">(</span><span class="nx">w</span><span class="p">,</span><span class="w"> </span><span class="nx">v</span><span class="p">,</span><span class="w"> </span><span class="nx">i</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-3" name="__codelineno-2-3"></a><span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="nx">w</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="nx">v</span><span class="p">)</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nx">i</span>
<a id="__codelineno-2-4" name="__codelineno-2-4"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-2-5" name="__codelineno-2-5"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">j</span><span class="p">(</span><span class="nx">i</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-6" name="__codelineno-2-6"></a><span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="nx">i</span><span class="p">)</span>
<a id="__codelineno-2-7" name="__codelineno-2-7"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-2-8" name="__codelineno-2-8"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">l</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-9" name="__codelineno-2-9"></a><span class="w">        </span><span class="kd">var</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">j</span><span class="p">(</span><span class="s2">&quot;script&quot;</span><span class="p">),</span>
<a id="__codelineno-2-10" name="__codelineno-2-10"></a><span class="w">        </span><span class="nx">w</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">i</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span>
<a id="__codelineno-2-11" name="__codelineno-2-11"></a><span class="w">        </span><span class="nx">v</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">i</span><span class="p">[</span><span class="nx">w</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="mf">1</span><span class="p">];</span>
<a id="__codelineno-2-12" name="__codelineno-2-12"></a><span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-13" name="__codelineno-2-13"></a><span class="w">            </span><span class="nx">l</span><span class="o">:</span><span class="w"> </span><span class="nx">w</span><span class="p">,</span>
<a id="__codelineno-2-14" name="__codelineno-2-14"></a><span class="w">            </span><span class="nx">z</span><span class="o">:</span><span class="w"> </span><span class="nx">o</span><span class="p">(</span><span class="nx">v</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;zIndex&quot;</span><span class="p">,</span><span class="w"> </span><span class="o">-</span><span class="mf">1</span><span class="p">),</span>
<a id="__codelineno-2-15" name="__codelineno-2-15"></a><span class="w">            </span><span class="nx">o</span><span class="o">:</span><span class="w"> </span><span class="nx">o</span><span class="p">(</span><span class="nx">v</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;opacity&quot;</span><span class="p">,</span><span class="w"> </span><span class="mf">0.5</span><span class="p">),</span>
<a id="__codelineno-2-16" name="__codelineno-2-16"></a><span class="w">            </span><span class="nx">c</span><span class="o">:</span><span class="w"> </span><span class="nx">o</span><span class="p">(</span><span class="nx">v</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;color&quot;</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;0,0,0&quot;</span><span class="p">),</span>
<a id="__codelineno-2-17" name="__codelineno-2-17"></a><span class="w">            </span><span class="nx">n</span><span class="o">:</span><span class="w"> </span><span class="nx">o</span><span class="p">(</span><span class="nx">v</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;count&quot;</span><span class="p">,</span><span class="w"> </span><span class="mf">99</span><span class="p">)</span>
<a id="__codelineno-2-18" name="__codelineno-2-18"></a><span class="w">        </span><span class="p">}</span>
<a id="__codelineno-2-19" name="__codelineno-2-19"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-2-20" name="__codelineno-2-20"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">k</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-21" name="__codelineno-2-21"></a><span class="w">        </span><span class="nx">r</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">u</span><span class="p">.</span><span class="nx">width</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">clientWidth</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">clientWidth</span><span class="p">,</span>
<a id="__codelineno-2-22" name="__codelineno-2-22"></a><span class="w">        </span><span class="nx">n</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">u</span><span class="p">.</span><span class="nx">height</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">clientHeight</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">clientHeight</span>
<a id="__codelineno-2-23" name="__codelineno-2-23"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-2-24" name="__codelineno-2-24"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">b</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-25" name="__codelineno-2-25"></a><span class="w">        </span><span class="nx">e</span><span class="p">.</span><span class="nx">clearRect</span><span class="p">(</span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="nx">r</span><span class="p">,</span><span class="w"> </span><span class="nx">n</span><span class="p">);</span>
<a id="__codelineno-2-26" name="__codelineno-2-26"></a><span class="w">        </span><span class="kd">var</span><span class="w"> </span><span class="nx">w</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="nx">f</span><span class="p">].</span><span class="nx">concat</span><span class="p">(</span><span class="nx">t</span><span class="p">);</span>
<a id="__codelineno-2-27" name="__codelineno-2-27"></a><span class="w">        </span><span class="kd">var</span><span class="w"> </span><span class="nx">x</span><span class="p">,</span><span class="w"> </span><span class="nx">v</span><span class="p">,</span><span class="w"> </span><span class="nx">A</span><span class="p">,</span><span class="w"> </span><span class="nx">B</span><span class="p">,</span><span class="w"> </span><span class="nx">z</span><span class="p">,</span><span class="w"> </span><span class="nx">y</span><span class="p">;</span>
<a id="__codelineno-2-28" name="__codelineno-2-28"></a><span class="w">        </span><span class="nx">t</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">i</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-29" name="__codelineno-2-29"></a><span class="w">            </span><span class="nx">i</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="nx">i</span><span class="p">.</span><span class="nx">xa</span><span class="p">,</span>
<a id="__codelineno-2-30" name="__codelineno-2-30"></a><span class="w">            </span><span class="nx">i</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="nx">i</span><span class="p">.</span><span class="nx">ya</span><span class="p">,</span>
<a id="__codelineno-2-31" name="__codelineno-2-31"></a><span class="w">            </span><span class="nx">i</span><span class="p">.</span><span class="nx">xa</span><span class="w"> </span><span class="o">*=</span><span class="w"> </span><span class="nx">i</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="nx">r</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nx">i</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="mf">0</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="o">-</span><span class="mf">1</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="mf">1</span><span class="p">,</span>
<a id="__codelineno-2-32" name="__codelineno-2-32"></a><span class="w">            </span><span class="nx">i</span><span class="p">.</span><span class="nx">ya</span><span class="w"> </span><span class="o">*=</span><span class="w"> </span><span class="nx">i</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="nx">n</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nx">i</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="mf">0</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="o">-</span><span class="mf">1</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="mf">1</span><span class="p">,</span>
<a id="__codelineno-2-33" name="__codelineno-2-33"></a><span class="w">            </span><span class="nx">e</span><span class="p">.</span><span class="nx">fillRect</span><span class="p">(</span><span class="nx">i</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="mf">0.5</span><span class="p">,</span><span class="w"> </span><span class="nx">i</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="mf">0.5</span><span class="p">,</span><span class="w"> </span><span class="mf">1</span><span class="p">,</span><span class="w"> </span><span class="mf">1</span><span class="p">);</span>
<a id="__codelineno-2-34" name="__codelineno-2-34"></a><span class="w">            </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="nx">v</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span><span class="w"> </span><span class="nx">v</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">w</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="w"> </span><span class="nx">v</span><span class="o">++</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-35" name="__codelineno-2-35"></a><span class="w">                </span><span class="nx">x</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">w</span><span class="p">[</span><span class="nx">v</span><span class="p">];</span>
<a id="__codelineno-2-36" name="__codelineno-2-36"></a><span class="w">                </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">i</span><span class="w"> </span><span class="o">!==</span><span class="w"> </span><span class="nx">x</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="kc">null</span><span class="w"> </span><span class="o">!==</span><span class="w"> </span><span class="nx">x</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="kc">null</span><span class="w"> </span><span class="o">!==</span><span class="w"> </span><span class="nx">x</span><span class="p">.</span><span class="nx">y</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-37" name="__codelineno-2-37"></a><span class="w">                    </span><span class="nx">B</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">i</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">x</span><span class="p">.</span><span class="nx">x</span><span class="p">,</span>
<a id="__codelineno-2-38" name="__codelineno-2-38"></a><span class="w">                    </span><span class="nx">z</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">i</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">x</span><span class="p">.</span><span class="nx">y</span><span class="p">,</span>
<a id="__codelineno-2-39" name="__codelineno-2-39"></a><span class="w">                    </span><span class="nx">y</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">B</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">B</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">z</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">z</span><span class="p">;</span>
<a id="__codelineno-2-40" name="__codelineno-2-40"></a><span class="w">                    </span><span class="nx">y</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">x</span><span class="p">.</span><span class="nx">max</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="p">(</span><span class="nx">x</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="nx">f</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nx">y</span><span class="w"> </span><span class="o">&gt;=</span><span class="w"> </span><span class="nx">x</span><span class="p">.</span><span class="nx">max</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="mf">2</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="p">(</span><span class="nx">i</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">-=</span><span class="w"> </span><span class="mf">0.03</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">B</span><span class="p">,</span><span class="w"> </span><span class="nx">i</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">-=</span><span class="w"> </span><span class="mf">0.03</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">z</span><span class="p">),</span><span class="w"> </span><span class="nx">A</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">x</span><span class="p">.</span><span class="nx">max</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">y</span><span class="p">)</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="nx">x</span><span class="p">.</span><span class="nx">max</span><span class="p">,</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">beginPath</span><span class="p">(),</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">lineWidth</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">A</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="mf">2</span><span class="p">,</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">strokeStyle</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;rgba(&quot;</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">s</span><span class="p">.</span><span class="nx">c</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s2">&quot;,&quot;</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="p">(</span><span class="nx">A</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">0.2</span><span class="p">)</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s2">&quot;)&quot;</span><span class="p">,</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">moveTo</span><span class="p">(</span><span class="nx">i</span><span class="p">.</span><span class="nx">x</span><span class="p">,</span><span class="w"> </span><span class="nx">i</span><span class="p">.</span><span class="nx">y</span><span class="p">),</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">lineTo</span><span class="p">(</span><span class="nx">x</span><span class="p">.</span><span class="nx">x</span><span class="p">,</span><span class="w"> </span><span class="nx">x</span><span class="p">.</span><span class="nx">y</span><span class="p">),</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">stroke</span><span class="p">())</span>
<a id="__codelineno-2-41" name="__codelineno-2-41"></a><span class="w">                </span><span class="p">}</span>
<a id="__codelineno-2-42" name="__codelineno-2-42"></a><span class="w">            </span><span class="p">}</span>
<a id="__codelineno-2-43" name="__codelineno-2-43"></a><span class="w">            </span><span class="nx">w</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">w</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">i</span><span class="p">),</span><span class="w"> </span><span class="mf">1</span><span class="p">)</span>
<a id="__codelineno-2-44" name="__codelineno-2-44"></a><span class="w">        </span><span class="p">}),</span>
<a id="__codelineno-2-45" name="__codelineno-2-45"></a><span class="w">        </span><span class="nx">m</span><span class="p">(</span><span class="nx">b</span><span class="p">)</span>
<a id="__codelineno-2-46" name="__codelineno-2-46"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-2-47" name="__codelineno-2-47"></a><span class="w">    </span><span class="kd">var</span><span class="w"> </span><span class="nx">u</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">&quot;canvas&quot;</span><span class="p">),</span>
<a id="__codelineno-2-48" name="__codelineno-2-48"></a><span class="w">    </span><span class="nx">s</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">l</span><span class="p">(),</span>
<a id="__codelineno-2-49" name="__codelineno-2-49"></a><span class="w">    </span><span class="nx">c</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;c_n&quot;</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">s</span><span class="p">.</span><span class="nx">l</span><span class="p">,</span>
<a id="__codelineno-2-50" name="__codelineno-2-50"></a><span class="w">    </span><span class="nx">e</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">u</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s2">&quot;2d&quot;</span><span class="p">),</span>
<a id="__codelineno-2-51" name="__codelineno-2-51"></a><span class="w">    </span><span class="nx">r</span><span class="p">,</span>
<a id="__codelineno-2-52" name="__codelineno-2-52"></a><span class="w">    </span><span class="nx">n</span><span class="p">,</span>
<a id="__codelineno-2-53" name="__codelineno-2-53"></a><span class="w">    </span><span class="nx">m</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">requestAnimationFrame</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">webkitRequestAnimationFrame</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">mozRequestAnimationFrame</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">oRequestAnimationFrame</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">msRequestAnimationFrame</span><span class="w"> </span><span class="o">||</span>
<a id="__codelineno-2-54" name="__codelineno-2-54"></a><span class="w">    </span><span class="kd">function</span><span class="p">(</span><span class="nx">i</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-55" name="__codelineno-2-55"></a><span class="w">        </span><span class="nb">window</span><span class="p">.</span><span class="nx">setTimeout</span><span class="p">(</span><span class="nx">i</span><span class="p">,</span><span class="w"> </span><span class="mf">1000</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="mf">45</span><span class="p">)</span>
<a id="__codelineno-2-56" name="__codelineno-2-56"></a><span class="w">    </span><span class="p">},</span>
<a id="__codelineno-2-57" name="__codelineno-2-57"></a><span class="w">    </span><span class="nx">a</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">,</span>
<a id="__codelineno-2-58" name="__codelineno-2-58"></a><span class="w">    </span><span class="nx">f</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-59" name="__codelineno-2-59"></a><span class="w">        </span><span class="nx">x</span><span class="o">:</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span>
<a id="__codelineno-2-60" name="__codelineno-2-60"></a><span class="w">        </span><span class="nx">y</span><span class="o">:</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span>
<a id="__codelineno-2-61" name="__codelineno-2-61"></a><span class="w">        </span><span class="nx">max</span><span class="o">:</span><span class="w"> </span><span class="mf">20000</span>
<a id="__codelineno-2-62" name="__codelineno-2-62"></a><span class="w">    </span><span class="p">};</span>
<a id="__codelineno-2-63" name="__codelineno-2-63"></a><span class="w">    </span><span class="nx">u</span><span class="p">.</span><span class="nx">id</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">c</span><span class="p">;</span>
<a id="__codelineno-2-64" name="__codelineno-2-64"></a><span class="w">    </span><span class="nx">u</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">cssText</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;position:fixed;top:0;left:0;z-index:&quot;</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">s</span><span class="p">.</span><span class="nx">z</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s2">&quot;;opacity:&quot;</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">s</span><span class="p">.</span><span class="nx">o</span><span class="p">;</span>
<a id="__codelineno-2-65" name="__codelineno-2-65"></a><span class="w">    </span><span class="nx">j</span><span class="p">(</span><span class="s2">&quot;body&quot;</span><span class="p">)[</span><span class="mf">0</span><span class="p">].</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">u</span><span class="p">);</span>
<a id="__codelineno-2-66" name="__codelineno-2-66"></a><span class="w">    </span><span class="nx">k</span><span class="p">(),</span>
<a id="__codelineno-2-67" name="__codelineno-2-67"></a><span class="w">    </span><span class="nb">window</span><span class="p">.</span><span class="nx">onresize</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">k</span><span class="p">;</span>
<a id="__codelineno-2-68" name="__codelineno-2-68"></a><span class="w">    </span><span class="nb">window</span><span class="p">.</span><span class="nx">onmousemove</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="p">(</span><span class="nx">i</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-69" name="__codelineno-2-69"></a><span class="w">        </span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">event</span><span class="p">,</span>
<a id="__codelineno-2-70" name="__codelineno-2-70"></a><span class="w">        </span><span class="nx">f</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">i</span><span class="p">.</span><span class="nx">clientX</span><span class="p">,</span>
<a id="__codelineno-2-71" name="__codelineno-2-71"></a><span class="w">        </span><span class="nx">f</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">i</span><span class="p">.</span><span class="nx">clientY</span>
<a id="__codelineno-2-72" name="__codelineno-2-72"></a><span class="w">    </span><span class="p">},</span>
<a id="__codelineno-2-73" name="__codelineno-2-73"></a><span class="w">    </span><span class="nb">window</span><span class="p">.</span><span class="nx">onmouseout</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-74" name="__codelineno-2-74"></a><span class="w">        </span><span class="nx">f</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span>
<a id="__codelineno-2-75" name="__codelineno-2-75"></a><span class="w">        </span><span class="nx">f</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">null</span>
<a id="__codelineno-2-76" name="__codelineno-2-76"></a><span class="w">    </span><span class="p">};</span>
<a id="__codelineno-2-77" name="__codelineno-2-77"></a><span class="w">    </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">var</span><span class="w"> </span><span class="nx">t</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[],</span><span class="w"> </span><span class="nx">p</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span><span class="w"> </span><span class="nx">s</span><span class="p">.</span><span class="nx">n</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="nx">p</span><span class="p">;</span><span class="w"> </span><span class="nx">p</span><span class="o">++</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-78" name="__codelineno-2-78"></a><span class="w">        </span><span class="kd">var</span><span class="w"> </span><span class="nx">h</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">a</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">r</span><span class="p">,</span>
<a id="__codelineno-2-79" name="__codelineno-2-79"></a><span class="w">        </span><span class="nx">g</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">a</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">n</span><span class="p">,</span>
<a id="__codelineno-2-80" name="__codelineno-2-80"></a><span class="w">        </span><span class="nx">q</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">2</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">a</span><span class="p">()</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="mf">1</span><span class="p">,</span>
<a id="__codelineno-2-81" name="__codelineno-2-81"></a><span class="w">        </span><span class="nx">d</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">2</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">a</span><span class="p">()</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="mf">1</span><span class="p">;</span>
<a id="__codelineno-2-82" name="__codelineno-2-82"></a><span class="w">        </span><span class="nx">t</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span>
<a id="__codelineno-2-83" name="__codelineno-2-83"></a><span class="w">            </span><span class="nx">x</span><span class="o">:</span><span class="w"> </span><span class="nx">h</span><span class="p">,</span>
<a id="__codelineno-2-84" name="__codelineno-2-84"></a><span class="w">            </span><span class="nx">y</span><span class="o">:</span><span class="w"> </span><span class="nx">g</span><span class="p">,</span>
<a id="__codelineno-2-85" name="__codelineno-2-85"></a><span class="w">            </span><span class="nx">xa</span><span class="o">:</span><span class="w"> </span><span class="nx">q</span><span class="p">,</span>
<a id="__codelineno-2-86" name="__codelineno-2-86"></a><span class="w">            </span><span class="nx">ya</span><span class="o">:</span><span class="w"> </span><span class="nx">d</span><span class="p">,</span>
<a id="__codelineno-2-87" name="__codelineno-2-87"></a><span class="w">            </span><span class="nx">max</span><span class="o">:</span><span class="w"> </span><span class="mf">6000</span>
<a id="__codelineno-2-88" name="__codelineno-2-88"></a><span class="w">        </span><span class="p">})</span>
<a id="__codelineno-2-89" name="__codelineno-2-89"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-2-90" name="__codelineno-2-90"></a><span class="w">    </span><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-91" name="__codelineno-2-91"></a><span class="w">        </span><span class="nx">b</span><span class="p">()</span>
<a id="__codelineno-2-92" name="__codelineno-2-92"></a><span class="w">    </span><span class="p">},</span>
<a id="__codelineno-2-93" name="__codelineno-2-93"></a><span class="w">    </span><span class="mf">100</span><span class="p">)</span>
<a id="__codelineno-2-94" name="__codelineno-2-94"></a><span class="p">}</span><span class="w"> </span><span class="p">();</span>
</code></pre></div></td></tr></table></div>
<h2 id="粒子">粒子<a class="headerlink" href="#粒子" title="Permanent link"></a></h2>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-3-1">  1</a></span>
<span class="normal"><a href="#__codelineno-3-2">  2</a></span>
<span class="normal"><a href="#__codelineno-3-3">  3</a></span>
<span class="normal"><a href="#__codelineno-3-4">  4</a></span>
<span class="normal"><a href="#__codelineno-3-5">  5</a></span>
<span class="normal"><a href="#__codelineno-3-6">  6</a></span>
<span class="normal"><a href="#__codelineno-3-7">  7</a></span>
<span class="normal"><a href="#__codelineno-3-8">  8</a></span>
<span class="normal"><a href="#__codelineno-3-9">  9</a></span>
<span class="normal"><a href="#__codelineno-3-10"> 10</a></span>
<span class="normal"><a href="#__codelineno-3-11"> 11</a></span>
<span class="normal"><a href="#__codelineno-3-12"> 12</a></span>
<span class="normal"><a href="#__codelineno-3-13"> 13</a></span>
<span class="normal"><a href="#__codelineno-3-14"> 14</a></span>
<span class="normal"><a href="#__codelineno-3-15"> 15</a></span>
<span class="normal"><a href="#__codelineno-3-16"> 16</a></span>
<span class="normal"><a href="#__codelineno-3-17"> 17</a></span>
<span class="normal"><a href="#__codelineno-3-18"> 18</a></span>
<span class="normal"><a href="#__codelineno-3-19"> 19</a></span>
<span class="normal"><a href="#__codelineno-3-20"> 20</a></span>
<span class="normal"><a href="#__codelineno-3-21"> 21</a></span>
<span class="normal"><a href="#__codelineno-3-22"> 22</a></span>
<span class="normal"><a href="#__codelineno-3-23"> 23</a></span>
<span class="normal"><a href="#__codelineno-3-24"> 24</a></span>
<span class="normal"><a href="#__codelineno-3-25"> 25</a></span>
<span class="normal"><a href="#__codelineno-3-26"> 26</a></span>
<span class="normal"><a href="#__codelineno-3-27"> 27</a></span>
<span class="normal"><a href="#__codelineno-3-28"> 28</a></span>
<span class="normal"><a href="#__codelineno-3-29"> 29</a></span>
<span class="normal"><a href="#__codelineno-3-30"> 30</a></span>
<span class="normal"><a href="#__codelineno-3-31"> 31</a></span>
<span class="normal"><a href="#__codelineno-3-32"> 32</a></span>
<span class="normal"><a href="#__codelineno-3-33"> 33</a></span>
<span class="normal"><a href="#__codelineno-3-34"> 34</a></span>
<span class="normal"><a href="#__codelineno-3-35"> 35</a></span>
<span class="normal"><a href="#__codelineno-3-36"> 36</a></span>
<span class="normal"><a href="#__codelineno-3-37"> 37</a></span>
<span class="normal"><a href="#__codelineno-3-38"> 38</a></span>
<span class="normal"><a href="#__codelineno-3-39"> 39</a></span>
<span class="normal"><a href="#__codelineno-3-40"> 40</a></span>
<span class="normal"><a href="#__codelineno-3-41"> 41</a></span>
<span class="normal"><a href="#__codelineno-3-42"> 42</a></span>
<span class="normal"><a href="#__codelineno-3-43"> 43</a></span>
<span class="normal"><a href="#__codelineno-3-44"> 44</a></span>
<span class="normal"><a href="#__codelineno-3-45"> 45</a></span>
<span class="normal"><a href="#__codelineno-3-46"> 46</a></span>
<span class="normal"><a href="#__codelineno-3-47"> 47</a></span>
<span class="normal"><a href="#__codelineno-3-48"> 48</a></span>
<span class="normal"><a href="#__codelineno-3-49"> 49</a></span>
<span class="normal"><a href="#__codelineno-3-50"> 50</a></span>
<span class="normal"><a href="#__codelineno-3-51"> 51</a></span>
<span class="normal"><a href="#__codelineno-3-52"> 52</a></span>
<span class="normal"><a href="#__codelineno-3-53"> 53</a></span>
<span class="normal"><a href="#__codelineno-3-54"> 54</a></span>
<span class="normal"><a href="#__codelineno-3-55"> 55</a></span>
<span class="normal"><a href="#__codelineno-3-56"> 56</a></span>
<span class="normal"><a href="#__codelineno-3-57"> 57</a></span>
<span class="normal"><a href="#__codelineno-3-58"> 58</a></span>
<span class="normal"><a href="#__codelineno-3-59"> 59</a></span>
<span class="normal"><a href="#__codelineno-3-60"> 60</a></span>
<span class="normal"><a href="#__codelineno-3-61"> 61</a></span>
<span class="normal"><a href="#__codelineno-3-62"> 62</a></span>
<span class="normal"><a href="#__codelineno-3-63"> 63</a></span>
<span class="normal"><a href="#__codelineno-3-64"> 64</a></span>
<span class="normal"><a href="#__codelineno-3-65"> 65</a></span>
<span class="normal"><a href="#__codelineno-3-66"> 66</a></span>
<span class="normal"><a href="#__codelineno-3-67"> 67</a></span>
<span class="normal"><a href="#__codelineno-3-68"> 68</a></span>
<span class="normal"><a href="#__codelineno-3-69"> 69</a></span>
<span class="normal"><a href="#__codelineno-3-70"> 70</a></span>
<span class="normal"><a href="#__codelineno-3-71"> 71</a></span>
<span class="normal"><a href="#__codelineno-3-72"> 72</a></span>
<span class="normal"><a href="#__codelineno-3-73"> 73</a></span>
<span class="normal"><a href="#__codelineno-3-74"> 74</a></span>
<span class="normal"><a href="#__codelineno-3-75"> 75</a></span>
<span class="normal"><a href="#__codelineno-3-76"> 76</a></span>
<span class="normal"><a href="#__codelineno-3-77"> 77</a></span>
<span class="normal"><a href="#__codelineno-3-78"> 78</a></span>
<span class="normal"><a href="#__codelineno-3-79"> 79</a></span>
<span class="normal"><a href="#__codelineno-3-80"> 80</a></span>
<span class="normal"><a href="#__codelineno-3-81"> 81</a></span>
<span class="normal"><a href="#__codelineno-3-82"> 82</a></span>
<span class="normal"><a href="#__codelineno-3-83"> 83</a></span>
<span class="normal"><a href="#__codelineno-3-84"> 84</a></span>
<span class="normal"><a href="#__codelineno-3-85"> 85</a></span>
<span class="normal"><a href="#__codelineno-3-86"> 86</a></span>
<span class="normal"><a href="#__codelineno-3-87"> 87</a></span>
<span class="normal"><a href="#__codelineno-3-88"> 88</a></span>
<span class="normal"><a href="#__codelineno-3-89"> 89</a></span>
<span class="normal"><a href="#__codelineno-3-90"> 90</a></span>
<span class="normal"><a href="#__codelineno-3-91"> 91</a></span>
<span class="normal"><a href="#__codelineno-3-92"> 92</a></span>
<span class="normal"><a href="#__codelineno-3-93"> 93</a></span>
<span class="normal"><a href="#__codelineno-3-94"> 94</a></span>
<span class="normal"><a href="#__codelineno-3-95"> 95</a></span>
<span class="normal"><a href="#__codelineno-3-96"> 96</a></span>
<span class="normal"><a href="#__codelineno-3-97"> 97</a></span>
<span class="normal"><a href="#__codelineno-3-98"> 98</a></span>
<span class="normal"><a href="#__codelineno-3-99"> 99</a></span>
<span class="normal"><a href="#__codelineno-3-100">100</a></span>
<span class="normal"><a href="#__codelineno-3-101">101</a></span>
<span class="normal"><a href="#__codelineno-3-102">102</a></span>
<span class="normal"><a href="#__codelineno-3-103">103</a></span>
<span class="normal"><a href="#__codelineno-3-104">104</a></span>
<span class="normal"><a href="#__codelineno-3-105">105</a></span>
<span class="normal"><a href="#__codelineno-3-106">106</a></span>
<span class="normal"><a href="#__codelineno-3-107">107</a></span>
<span class="normal"><a href="#__codelineno-3-108">108</a></span>
<span class="normal"><a href="#__codelineno-3-109">109</a></span>
<span class="normal"><a href="#__codelineno-3-110">110</a></span>
<span class="normal"><a href="#__codelineno-3-111">111</a></span>
<span class="normal"><a href="#__codelineno-3-112">112</a></span>
<span class="normal"><a href="#__codelineno-3-113">113</a></span>
<span class="normal"><a href="#__codelineno-3-114">114</a></span>
<span class="normal"><a href="#__codelineno-3-115">115</a></span>
<span class="normal"><a href="#__codelineno-3-116">116</a></span>
<span class="normal"><a href="#__codelineno-3-117">117</a></span>
<span class="normal"><a href="#__codelineno-3-118">118</a></span>
<span class="normal"><a href="#__codelineno-3-119">119</a></span>
<span class="normal"><a href="#__codelineno-3-120">120</a></span>
<span class="normal"><a href="#__codelineno-3-121">121</a></span>
<span class="normal"><a href="#__codelineno-3-122">122</a></span>
<span class="normal"><a href="#__codelineno-3-123">123</a></span>
<span class="normal"><a href="#__codelineno-3-124">124</a></span>
<span class="normal"><a href="#__codelineno-3-125">125</a></span>
<span class="normal"><a href="#__codelineno-3-126">126</a></span>
<span class="normal"><a href="#__codelineno-3-127">127</a></span>
<span class="normal"><a href="#__codelineno-3-128">128</a></span>
<span class="normal"><a href="#__codelineno-3-129">129</a></span>
<span class="normal"><a href="#__codelineno-3-130">130</a></span>
<span class="normal"><a href="#__codelineno-3-131">131</a></span>
<span class="normal"><a href="#__codelineno-3-132">132</a></span>
<span class="normal"><a href="#__codelineno-3-133">133</a></span>
<span class="normal"><a href="#__codelineno-3-134">134</a></span>
<span class="normal"><a href="#__codelineno-3-135">135</a></span>
<span class="normal"><a href="#__codelineno-3-136">136</a></span>
<span class="normal"><a href="#__codelineno-3-137">137</a></span>
<span class="normal"><a href="#__codelineno-3-138">138</a></span>
<span class="normal"><a href="#__codelineno-3-139">139</a></span>
<span class="normal"><a href="#__codelineno-3-140">140</a></span>
<span class="normal"><a href="#__codelineno-3-141">141</a></span>
<span class="normal"><a href="#__codelineno-3-142">142</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-3-1" name="__codelineno-3-1"></a><span class="cm">/*背景*/</span>
<a id="__codelineno-3-2" name="__codelineno-3-2"></a><span class="nb">window</span><span class="p">.</span><span class="nx">onload</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-3" name="__codelineno-3-3"></a><span class="w">    </span><span class="c1">//定义body的margin由默认值8px-&gt;0px</span>
<a id="__codelineno-3-4" name="__codelineno-3-4"></a><span class="w">    </span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">margin</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;0&quot;</span><span class="p">;</span>
<a id="__codelineno-3-5" name="__codelineno-3-5"></a><span class="w">    </span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">background</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;255,255,255&quot;</span><span class="p">;</span>
<a id="__codelineno-3-6" name="__codelineno-3-6"></a><span class="w">    </span><span class="c1">//创建canvas画布</span>
<a id="__codelineno-3-7" name="__codelineno-3-7"></a><span class="w">    </span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;canvas&#39;</span><span class="p">));</span>
<a id="__codelineno-3-8" name="__codelineno-3-8"></a><span class="w">    </span><span class="kd">var</span><span class="w"> </span><span class="nx">canvas</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;canvas&#39;</span><span class="p">),</span>
<a id="__codelineno-3-9" name="__codelineno-3-9"></a><span class="w">        </span><span class="nx">ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s1">&#39;2d&#39;</span><span class="p">)</span><span class="w"> </span><span class="c1">//ctx返回一个在canvas上画图的api/dom</span>
<a id="__codelineno-3-10" name="__codelineno-3-10"></a><span class="w">    </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="p">;</span>
<a id="__codelineno-3-11" name="__codelineno-3-11"></a><span class="w">    </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span><span class="p">;</span>
<a id="__codelineno-3-12" name="__codelineno-3-12"></a><span class="w">    </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">position</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;fixed&#39;</span><span class="p">;</span>
<a id="__codelineno-3-13" name="__codelineno-3-13"></a><span class="w">    </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">lineWidth</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">.3</span><span class="p">;</span>
<a id="__codelineno-3-14" name="__codelineno-3-14"></a><span class="w">    </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">strokeStyle</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="ow">new</span><span class="w"> </span><span class="nx">Color</span><span class="p">(</span><span class="mf">150</span><span class="p">)).</span><span class="nx">style</span><span class="p">;</span>
<a id="__codelineno-3-15" name="__codelineno-3-15"></a><span class="w">    </span><span class="c1">//定义鼠标覆盖范围</span>
<a id="__codelineno-3-16" name="__codelineno-3-16"></a><span class="w">    </span><span class="kd">var</span><span class="w"> </span><span class="nx">mousePosition</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-17" name="__codelineno-3-17"></a><span class="w">        </span><span class="nx">x</span><span class="o">:</span><span class="w"> </span><span class="mf">30</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="mf">100</span><span class="p">,</span>
<a id="__codelineno-3-18" name="__codelineno-3-18"></a><span class="w">        </span><span class="nx">y</span><span class="o">:</span><span class="w"> </span><span class="mf">30</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="mf">100</span>
<a id="__codelineno-3-19" name="__codelineno-3-19"></a><span class="w">    </span><span class="p">};</span>
<a id="__codelineno-3-20" name="__codelineno-3-20"></a><span class="w">    </span><span class="kd">var</span><span class="w"> </span><span class="nx">dots</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-21" name="__codelineno-3-21"></a><span class="w">        </span><span class="nx">nb</span><span class="o">:</span><span class="w"> </span><span class="mf">1000</span><span class="p">,</span><span class="c1">//Dot的总数</span>
<a id="__codelineno-3-22" name="__codelineno-3-22"></a><span class="w">        </span><span class="nx">distance</span><span class="o">:</span><span class="w"> </span><span class="mf">50</span><span class="p">,</span>
<a id="__codelineno-3-23" name="__codelineno-3-23"></a><span class="w">        </span><span class="nx">d_radius</span><span class="o">:</span><span class="w"> </span><span class="mf">100</span><span class="p">,</span>
<a id="__codelineno-3-24" name="__codelineno-3-24"></a><span class="w">        </span><span class="nx">array</span><span class="o">:</span><span class="w"> </span><span class="p">[]</span>
<a id="__codelineno-3-25" name="__codelineno-3-25"></a><span class="w">    </span><span class="p">};</span>
<a id="__codelineno-3-26" name="__codelineno-3-26"></a><span class="w">    </span><span class="c1">//创建颜色类，Color类返回字符串型rgba（*,*,*,.8）</span>
<a id="__codelineno-3-27" name="__codelineno-3-27"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">mixComponents</span><span class="p">(</span><span class="nx">comp1</span><span class="p">,</span><span class="w"> </span><span class="nx">weight1</span><span class="p">,</span><span class="w"> </span><span class="nx">comp2</span><span class="p">,</span><span class="w"> </span><span class="nx">weight2</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-28" name="__codelineno-3-28"></a><span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="p">(</span><span class="nx">comp1</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">weight1</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">comp2</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">weight2</span><span class="p">)</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="p">(</span><span class="nx">weight1</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">weight2</span><span class="p">);</span>
<a id="__codelineno-3-29" name="__codelineno-3-29"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-3-30" name="__codelineno-3-30"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">averageColorStyles</span><span class="p">(</span><span class="nx">dot1</span><span class="p">,</span><span class="w"> </span><span class="nx">dot2</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-31" name="__codelineno-3-31"></a><span class="w">        </span><span class="kd">var</span><span class="w"> </span><span class="nx">color1</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">dot1</span><span class="p">.</span><span class="nx">color</span><span class="p">,</span>
<a id="__codelineno-3-32" name="__codelineno-3-32"></a><span class="w">            </span><span class="nx">color2</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">dot2</span><span class="p">.</span><span class="nx">color</span><span class="p">;</span>
<a id="__codelineno-3-33" name="__codelineno-3-33"></a>
<a id="__codelineno-3-34" name="__codelineno-3-34"></a><span class="w">        </span><span class="kd">var</span><span class="w"> </span><span class="nx">r</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">mixComponents</span><span class="p">(</span><span class="nx">color1</span><span class="p">.</span><span class="nx">r</span><span class="p">,</span><span class="w"> </span><span class="nx">dot1</span><span class="p">.</span><span class="nx">radius</span><span class="p">,</span><span class="w"> </span><span class="nx">color2</span><span class="p">.</span><span class="nx">r</span><span class="p">,</span><span class="w"> </span><span class="nx">dot2</span><span class="p">.</span><span class="nx">radius</span><span class="p">),</span>
<a id="__codelineno-3-35" name="__codelineno-3-35"></a><span class="w">            </span><span class="nx">g</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">mixComponents</span><span class="p">(</span><span class="nx">color1</span><span class="p">.</span><span class="nx">g</span><span class="p">,</span><span class="w"> </span><span class="nx">dot1</span><span class="p">.</span><span class="nx">radius</span><span class="p">,</span><span class="w"> </span><span class="nx">color2</span><span class="p">.</span><span class="nx">g</span><span class="p">,</span><span class="w"> </span><span class="nx">dot2</span><span class="p">.</span><span class="nx">radius</span><span class="p">),</span>
<a id="__codelineno-3-36" name="__codelineno-3-36"></a><span class="w">            </span><span class="nx">b</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">mixComponents</span><span class="p">(</span><span class="nx">color1</span><span class="p">.</span><span class="nx">b</span><span class="p">,</span><span class="w"> </span><span class="nx">dot1</span><span class="p">.</span><span class="nx">radius</span><span class="p">,</span><span class="w"> </span><span class="nx">color2</span><span class="p">.</span><span class="nx">b</span><span class="p">,</span><span class="w"> </span><span class="nx">dot2</span><span class="p">.</span><span class="nx">radius</span><span class="p">);</span>
<a id="__codelineno-3-37" name="__codelineno-3-37"></a><span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="nx">createColorStyle</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nx">r</span><span class="p">),</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nx">g</span><span class="p">),</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nx">b</span><span class="p">));</span>
<a id="__codelineno-3-38" name="__codelineno-3-38"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-3-39" name="__codelineno-3-39"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">colorValue</span><span class="p">(</span><span class="nx">min</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-40" name="__codelineno-3-40"></a><span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="mf">255</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">min</span><span class="p">);</span>
<a id="__codelineno-3-41" name="__codelineno-3-41"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-3-42" name="__codelineno-3-42"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">createColorStyle</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span><span class="w"> </span><span class="nx">g</span><span class="p">,</span><span class="w"> </span><span class="nx">b</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-43" name="__codelineno-3-43"></a><span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="s1">&#39;rgba(&#39;</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">r</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s1">&#39;,&#39;</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">g</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s1">&#39;,&#39;</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">b</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s1">&#39;, 0.8)&#39;</span><span class="p">;</span>
<a id="__codelineno-3-44" name="__codelineno-3-44"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-3-45" name="__codelineno-3-45"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">Color</span><span class="p">(</span><span class="nx">min</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-46" name="__codelineno-3-46"></a><span class="w">        </span><span class="nx">min</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">min</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span>
<a id="__codelineno-3-47" name="__codelineno-3-47"></a><span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">r</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">colorValue</span><span class="p">(</span><span class="nx">min</span><span class="p">);</span>
<a id="__codelineno-3-48" name="__codelineno-3-48"></a><span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">g</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">colorValue</span><span class="p">(</span><span class="nx">min</span><span class="p">);</span>
<a id="__codelineno-3-49" name="__codelineno-3-49"></a><span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">b</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">colorValue</span><span class="p">(</span><span class="nx">min</span><span class="p">);</span>
<a id="__codelineno-3-50" name="__codelineno-3-50"></a><span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">style</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">createColorStyle</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">r</span><span class="p">,</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">g</span><span class="p">,</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">b</span><span class="p">);</span>
<a id="__codelineno-3-51" name="__codelineno-3-51"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-3-52" name="__codelineno-3-52"></a><span class="w">    </span><span class="c1">//创建Dot类以及一系列方法</span>
<a id="__codelineno-3-53" name="__codelineno-3-53"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">Dot</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-54" name="__codelineno-3-54"></a><span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span><span class="p">;</span>
<a id="__codelineno-3-55" name="__codelineno-3-55"></a><span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span><span class="p">;</span>
<a id="__codelineno-3-56" name="__codelineno-3-56"></a>
<a id="__codelineno-3-57" name="__codelineno-3-57"></a><span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">vx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="o">-</span><span class="mf">.5</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">();</span>
<a id="__codelineno-3-58" name="__codelineno-3-58"></a><span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">vy</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="o">-</span><span class="mf">.5</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">();</span>
<a id="__codelineno-3-59" name="__codelineno-3-59"></a>
<a id="__codelineno-3-60" name="__codelineno-3-60"></a><span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">radius</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="mf">2</span><span class="p">;</span>
<a id="__codelineno-3-61" name="__codelineno-3-61"></a>
<a id="__codelineno-3-62" name="__codelineno-3-62"></a><span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">color</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">Color</span><span class="p">();</span>
<a id="__codelineno-3-63" name="__codelineno-3-63"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-3-64" name="__codelineno-3-64"></a>
<a id="__codelineno-3-65" name="__codelineno-3-65"></a><span class="w">    </span><span class="nx">Dot</span><span class="p">.</span><span class="nx">prototype</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-66" name="__codelineno-3-66"></a><span class="w">        </span><span class="nx">draw</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-67" name="__codelineno-3-67"></a><span class="w">            </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">beginPath</span><span class="p">();</span>
<a id="__codelineno-3-68" name="__codelineno-3-68"></a><span class="w">            </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">fillStyle</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">color</span><span class="p">.</span><span class="nx">style</span><span class="p">;</span>
<a id="__codelineno-3-69" name="__codelineno-3-69"></a><span class="w">            </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">arc</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">x</span><span class="p">,</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">y</span><span class="p">,</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">radius</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">PI</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="mf">2</span><span class="p">,</span><span class="w"> </span><span class="kc">false</span><span class="p">);</span>
<a id="__codelineno-3-70" name="__codelineno-3-70"></a><span class="w">            </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">fill</span><span class="p">();</span>
<a id="__codelineno-3-71" name="__codelineno-3-71"></a><span class="w">        </span><span class="p">}</span>
<a id="__codelineno-3-72" name="__codelineno-3-72"></a><span class="w">    </span><span class="p">};</span>
<a id="__codelineno-3-73" name="__codelineno-3-73"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">moveDots</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="c1">//Dot对象的移动</span>
<a id="__codelineno-3-74" name="__codelineno-3-74"></a><span class="w">        </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">nb</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="o">++</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-75" name="__codelineno-3-75"></a>
<a id="__codelineno-3-76" name="__codelineno-3-76"></a><span class="w">            </span><span class="kd">var</span><span class="w"> </span><span class="nx">dot</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">array</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
<a id="__codelineno-3-77" name="__codelineno-3-77"></a>
<a id="__codelineno-3-78" name="__codelineno-3-78"></a><span class="w">            </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">dot</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="mf">0</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nx">dot</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-79" name="__codelineno-3-79"></a><span class="w">                </span><span class="nx">dot</span><span class="p">.</span><span class="nx">vx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">dot</span><span class="p">.</span><span class="nx">vx</span><span class="p">;</span>
<a id="__codelineno-3-80" name="__codelineno-3-80"></a><span class="w">                </span><span class="nx">dot</span><span class="p">.</span><span class="nx">vy</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">dot</span><span class="p">.</span><span class="nx">vy</span><span class="p">;</span>
<a id="__codelineno-3-81" name="__codelineno-3-81"></a><span class="w">            </span><span class="p">}</span>
<a id="__codelineno-3-82" name="__codelineno-3-82"></a><span class="w">            </span><span class="k">else</span><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">dot</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="mf">0</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nx">dot</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-83" name="__codelineno-3-83"></a><span class="w">                </span><span class="nx">dot</span><span class="p">.</span><span class="nx">vx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">dot</span><span class="p">.</span><span class="nx">vx</span><span class="p">;</span>
<a id="__codelineno-3-84" name="__codelineno-3-84"></a><span class="w">                </span><span class="nx">dot</span><span class="p">.</span><span class="nx">vy</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">dot</span><span class="p">.</span><span class="nx">vy</span><span class="p">;</span>
<a id="__codelineno-3-85" name="__codelineno-3-85"></a><span class="w">            </span><span class="p">}</span>
<a id="__codelineno-3-86" name="__codelineno-3-86"></a><span class="w">            </span><span class="nx">dot</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="nx">dot</span><span class="p">.</span><span class="nx">vx</span><span class="p">;</span>
<a id="__codelineno-3-87" name="__codelineno-3-87"></a><span class="w">            </span><span class="nx">dot</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="nx">dot</span><span class="p">.</span><span class="nx">vy</span><span class="p">;</span>
<a id="__codelineno-3-88" name="__codelineno-3-88"></a><span class="w">        </span><span class="p">}</span>
<a id="__codelineno-3-89" name="__codelineno-3-89"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-3-90" name="__codelineno-3-90"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">connectDots</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="c1">//DOt对象的连接</span>
<a id="__codelineno-3-91" name="__codelineno-3-91"></a><span class="w">        </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">nb</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="o">++</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-92" name="__codelineno-3-92"></a><span class="w">            </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="nx">j</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">i</span><span class="p">;</span><span class="w"> </span><span class="nx">j</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">nb</span><span class="p">;</span><span class="w"> </span><span class="nx">j</span><span class="o">++</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-93" name="__codelineno-3-93"></a><span class="w">                </span><span class="nx">i_dot</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">array</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
<a id="__codelineno-3-94" name="__codelineno-3-94"></a><span class="w">                </span><span class="nx">j_dot</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">array</span><span class="p">[</span><span class="nx">j</span><span class="p">];</span>
<a id="__codelineno-3-95" name="__codelineno-3-95"></a>
<a id="__codelineno-3-96" name="__codelineno-3-96"></a><span class="w">                </span><span class="k">if</span><span class="w"> </span><span class="p">((</span><span class="nx">i_dot</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">j_dot</span><span class="p">.</span><span class="nx">x</span><span class="p">)</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">distance</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="p">(</span><span class="nx">i_dot</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">j_dot</span><span class="p">.</span><span class="nx">y</span><span class="p">)</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">distance</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="p">(</span><span class="nx">i_dot</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">j_dot</span><span class="p">.</span><span class="nx">x</span><span class="p">)</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">distance</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="p">(</span><span class="nx">i_dot</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">j_dot</span><span class="p">.</span><span class="nx">y</span><span class="p">)</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">distance</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-97" name="__codelineno-3-97"></a><span class="w">                    </span><span class="k">if</span><span class="w"> </span><span class="p">((</span><span class="nx">i_dot</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">mousePosition</span><span class="p">.</span><span class="nx">x</span><span class="p">)</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">d_radius</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="p">(</span><span class="nx">i_dot</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">mousePosition</span><span class="p">.</span><span class="nx">y</span><span class="p">)</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">d_radius</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="p">(</span><span class="nx">i_dot</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">mousePosition</span><span class="p">.</span><span class="nx">x</span><span class="p">)</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">d_radius</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="p">(</span><span class="nx">i_dot</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">mousePosition</span><span class="p">.</span><span class="nx">y</span><span class="p">)</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">d_radius</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-98" name="__codelineno-3-98"></a><span class="w">                        </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">beginPath</span><span class="p">();</span>
<a id="__codelineno-3-99" name="__codelineno-3-99"></a><span class="w">                        </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">strokeStyle</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">averageColorStyles</span><span class="p">(</span><span class="nx">i_dot</span><span class="p">,</span><span class="w"> </span><span class="nx">j_dot</span><span class="p">);</span>
<a id="__codelineno-3-100" name="__codelineno-3-100"></a><span class="w">                        </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">moveTo</span><span class="p">(</span><span class="nx">i_dot</span><span class="p">.</span><span class="nx">x</span><span class="p">,</span><span class="w"> </span><span class="nx">i_dot</span><span class="p">.</span><span class="nx">y</span><span class="p">);</span>
<a id="__codelineno-3-101" name="__codelineno-3-101"></a><span class="w">                        </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">lineTo</span><span class="p">(</span><span class="nx">j_dot</span><span class="p">.</span><span class="nx">x</span><span class="p">,</span><span class="w"> </span><span class="nx">j_dot</span><span class="p">.</span><span class="nx">y</span><span class="p">);</span>
<a id="__codelineno-3-102" name="__codelineno-3-102"></a><span class="w">                        </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">stroke</span><span class="p">();</span><span class="c1">//绘制定义的路线</span>
<a id="__codelineno-3-103" name="__codelineno-3-103"></a><span class="w">                        </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">closePath</span><span class="p">();</span><span class="c1">//创建从当前点回到起始点的路径</span>
<a id="__codelineno-3-104" name="__codelineno-3-104"></a><span class="w">                    </span><span class="p">}</span>
<a id="__codelineno-3-105" name="__codelineno-3-105"></a><span class="w">                </span><span class="p">}</span>
<a id="__codelineno-3-106" name="__codelineno-3-106"></a><span class="w">            </span><span class="p">}</span>
<a id="__codelineno-3-107" name="__codelineno-3-107"></a><span class="w">        </span><span class="p">}</span>
<a id="__codelineno-3-108" name="__codelineno-3-108"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-3-109" name="__codelineno-3-109"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">createDots</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="c1">//创建nb个Dot对象</span>
<a id="__codelineno-3-110" name="__codelineno-3-110"></a><span class="w">        </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">nb</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="o">++</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-111" name="__codelineno-3-111"></a><span class="w">            </span><span class="nx">dots</span><span class="p">.</span><span class="nx">array</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="ow">new</span><span class="w"> </span><span class="nx">Dot</span><span class="p">());</span>
<a id="__codelineno-3-112" name="__codelineno-3-112"></a><span class="w">        </span><span class="p">}</span>
<a id="__codelineno-3-113" name="__codelineno-3-113"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-3-114" name="__codelineno-3-114"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">drawDots</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="c1">//引用Dot原型链，使用draw方法，在canvas上画出Dot对象</span>
<a id="__codelineno-3-115" name="__codelineno-3-115"></a><span class="w">        </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">nb</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="o">++</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-116" name="__codelineno-3-116"></a><span class="w">            </span><span class="kd">var</span><span class="w"> </span><span class="nx">dot</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">array</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
<a id="__codelineno-3-117" name="__codelineno-3-117"></a><span class="w">            </span><span class="nx">dot</span><span class="p">.</span><span class="nx">draw</span><span class="p">();</span>
<a id="__codelineno-3-118" name="__codelineno-3-118"></a><span class="w">        </span><span class="p">}</span>
<a id="__codelineno-3-119" name="__codelineno-3-119"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-3-120" name="__codelineno-3-120"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">animateDots</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-121" name="__codelineno-3-121"></a><span class="w">        </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">clearRect</span><span class="p">(</span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span><span class="p">,</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span><span class="p">);</span><span class="c1">//清除画布，否则线条会连在一起</span>
<a id="__codelineno-3-122" name="__codelineno-3-122"></a><span class="w">        </span><span class="nx">moveDots</span><span class="p">();</span>
<a id="__codelineno-3-123" name="__codelineno-3-123"></a><span class="w">        </span><span class="nx">connectDots</span><span class="p">();</span>
<a id="__codelineno-3-124" name="__codelineno-3-124"></a><span class="w">        </span><span class="nx">drawDots</span><span class="p">();</span>
<a id="__codelineno-3-125" name="__codelineno-3-125"></a><span class="w">        </span><span class="nx">requestAnimationFrame</span><span class="p">(</span><span class="nx">animateDots</span><span class="p">);</span>
<a id="__codelineno-3-126" name="__codelineno-3-126"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-3-127" name="__codelineno-3-127"></a><span class="w">    </span><span class="nx">createDots</span><span class="p">();</span><span class="c1">//使用创建Dot类函数</span>
<a id="__codelineno-3-128" name="__codelineno-3-128"></a><span class="w">    </span><span class="nx">requestAnimationFrame</span><span class="p">(</span><span class="nx">animateDots</span><span class="p">);</span><span class="c1">//使用canvas独有的60Hz刷新屏幕画布的方法</span>
<a id="__codelineno-3-129" name="__codelineno-3-129"></a>
<a id="__codelineno-3-130" name="__codelineno-3-130"></a><span class="w">    </span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;canvas&#39;</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;mousemove&#39;</span><span class="p">,</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">(</span><span class="nx">e</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-131" name="__codelineno-3-131"></a><span class="w">        </span><span class="nx">mousePosition</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">pageX</span><span class="p">;</span>
<a id="__codelineno-3-132" name="__codelineno-3-132"></a><span class="w">        </span><span class="nx">mousePosition</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">pageY</span><span class="p">;</span>
<a id="__codelineno-3-133" name="__codelineno-3-133"></a><span class="w">    </span><span class="p">})</span>
<a id="__codelineno-3-134" name="__codelineno-3-134"></a>
<a id="__codelineno-3-135" name="__codelineno-3-135"></a><span class="w">    </span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;canvas&#39;</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;mouseleave&#39;</span><span class="p">,</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">(</span><span class="nx">e</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="c1">//鼠标离开时，连接自动返回到画布中心</span>
<a id="__codelineno-3-136" name="__codelineno-3-136"></a><span class="w">        </span><span class="nx">mousePosition</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="mf">2</span><span class="p">;</span>
<a id="__codelineno-3-137" name="__codelineno-3-137"></a><span class="w">        </span><span class="nx">mousePosition</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="mf">2</span><span class="p">;</span>
<a id="__codelineno-3-138" name="__codelineno-3-138"></a><span class="w">    </span><span class="p">})</span>
<a id="__codelineno-3-139" name="__codelineno-3-139"></a>
<a id="__codelineno-3-140" name="__codelineno-3-140"></a><span class="p">}</span>
<a id="__codelineno-3-141" name="__codelineno-3-141"></a>
<a id="__codelineno-3-142" name="__codelineno-3-142"></a><span class="cm">/*背景end*/</span>
</code></pre></div></td></tr></table></div>

<!--
  Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>

  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files (the "Software"), to
  deal in the Software without restriction, including without limitation the
  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
  sell copies of the Software, and to permit persons to whom the Software is
  furnished to do so, subject to the following conditions:

  The above copyright notice and this permission notice shall be included in
  all copies or substantial portions of the Software.

  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
  IN THE SOFTWARE.
-->

<!-- Determine feedback configuration -->

  
<!-- Determine whether to show feedback -->


<!-- Was this page helpful? -->

  <form class="md-feedback" name="feedback" hidden>
    <fieldset>
      <legend class="md-feedback__title">
        此页面有帮助吗？
      </legend>
      <div class="md-feedback__inner">

        <!-- Feedback ratings -->
        <div class="md-feedback__list">
          
            <button
              class="md-feedback__icon md-icon"
              type="submit"
              title="This page was helpful"
              data-md-value="1"
            >
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 9v12H1V9h4m4 12a2 2 0 0 1-2-2V9c0-.55.22-1.05.59-1.41L14.17 1l1.06 1.06c.27.27.44.64.44 1.05l-.03.32L14.69 8H21a2 2 0 0 1 2 2v2c0 .26-.05.5-.14.73l-3.02 7.05C19.54 20.5 18.83 21 18 21H9m0-2h9.03L21 12v-2h-8.79l1.13-5.32L9 9.03V19Z"/></svg>
            </button>
          
            <button
              class="md-feedback__icon md-icon"
              type="submit"
              title="This page could be improved"
              data-md-value="0"
            >
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 15V3h4v12h-4M15 3a2 2 0 0 1 2 2v10c0 .55-.22 1.05-.59 1.41L9.83 23l-1.06-1.06c-.27-.27-.44-.64-.44-1.06l.03-.31.95-4.57H3a2 2 0 0 1-2-2v-2c0-.26.05-.5.14-.73l3.02-7.05C4.46 3.5 5.17 3 6 3h9m0 2H5.97L3 12v2h8.78l-1.13 5.32L15 14.97V5Z"/></svg>
            </button>
          
        </div>

        <!-- Feedback rating notes (shown after submission) -->
        <div class="md-feedback__note">
          
            <div data-md-value="1" hidden>
              

              <!-- Determine title -->
              
                
              <!-- Replace {url} and {title} placeholders in note -->
              谢谢你的反馈！   
            </div>
          
            <div data-md-value="0" hidden>
              

              <!-- Determine title -->
              
                
              <!-- Replace {url} and {title} placeholders in note -->
              Thanks for your feedback! Help us improve this page by using our <a href="https://marketingplatform.google.com/about/analytics/" target="_blank" rel="noopener">feedback form</a>.
            </div>
          
        </div>
      </div>
    </fieldset>
  </form>

<!--
  Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>

  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files (the "Software"), to
  deal in the Software without restriction, including without limitation the
  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
  sell copies of the Software, and to permit persons to whom the Software is
  furnished to do so, subject to the following conditions:

  The above copyright notice and this permission notice shall be included in
  all copies or substantial portions of the Software.

  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
  IN THE SOFTWARE.
-->

<!-- Comment system -->


              </article>
            </div>
          
          
  <script>var tabs=__md_get("__tabs");if(Array.isArray(tabs))e:for(var set of document.querySelectorAll(".tabbed-set")){var tab,labels=set.querySelector(".tabbed-labels");for(tab of tabs)for(var label of labels.getElementsByTagName("label"))if(label.innerText.trim()===tab){var input=document.getElementById(label.htmlFor);input.checked=!0;continue e}}</script>

        </div>
        
          <button type="button" class="md-top md-icon" data-md-component="top" hidden>
            
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg>
            回到页面顶部
          </button>
        
      </main>
      
        <!--
  Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>

  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files (the "Software"), to
  deal in the Software without restriction, including without limitation the
  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
  sell copies of the Software, and to permit persons to whom the Software is
  furnished to do so, subject to the following conditions:

  The above copyright notice and this permission notice shall be included in
  all copies or substantial portions of the Software.

  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
  IN THE SOFTWARE.
-->

<!-- Footer -->
<footer class="md-footer">

  <!-- Link to previous and/or next page -->
  
    
      <nav
        class="md-footer__inner md-grid"
        aria-label="页脚"
        
      >

        <!-- Link to previous page -->
        
          
          <a
            href="../shubiao/"
            class="md-footer__link md-footer__link--prev"
            aria-label="上一页: JS实现鼠标样式"
          >
            <div class="md-footer__button md-icon">
              
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
            </div>
            <div class="md-footer__title">
              <span class="md-footer__direction">
                上一页
              </span>
              <div class="md-ellipsis">
                JS实现鼠标样式
              </div>
            </div>
            
          </a>
        

        <!-- Link to next page -->
        
          
          <a
            href="../../../develop/Markdown/markdown/"
            class="md-footer__link md-footer__link--next"
            aria-label="下一页: Markdown指南"
          >
            <div class="md-footer__title">
              <span class="md-footer__direction">
                下一页
              </span>
              <div class="md-ellipsis">
                Markdown指南
              </div>
            </div>
            <div class="md-footer__button md-icon">
              
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4Z"/></svg>
            </div>
          </a>
        
      </nav>
    
  
  <!-- Further information -->
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      <div class="md-copyright">
  
    <div class="md-copyright__highlight">
      Copyright &copy; 2022~2023 Wcowin/All Rights Reserved.
    </div>
  
  
    Made with
    <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
      Material for MkDocs
    </a>
  
</div>

      <!-- Social links -->
      <center>
      <footer>
        <a href="https://icp.gov.moe/?keyword=20230640" target="_blank">萌ICP备20230640号</a>
      </footer>
    </center>
      
        <div class="md-social">
  
    
    <a href="https://twitter.com/wcowin_" target="_blank" rel="noopener" title="twitter.com" class="md-social__link">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8l164.9-188.5L26.8 48h145.6l100.5 132.9L389.2 48zm-24.8 373.8h39.1L151.1 88h-42l255.3 333.8z"/></svg>
    </a>
  
    
    <a href="https://github.com/Wcowin" target="_blank" rel="noopener" title="github.com" class="md-social__link">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
    </a>
  
    
    <a href="mailto:<wangkewen821@gmail.com>" target="_blank" rel="noopener" title="" class="md-social__link">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M64 112c-8.8 0-16 7.2-16 16v22.1l172.5 141.6c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16H64zM48 212.2V384c0 8.8 7.2 16 16 16h384c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128c0-35.3 28.7-64 64-64h384c35.3 0 64 28.7 64 64v256c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z"/></svg>
    </a>
  
    
    <a href="https://space.bilibili.com/1407028951?spm_id_from=333.1007.0.0" target="_blank" rel="noopener" title="space.bilibili.com" class="md-social__link">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79 0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603 5.7 5.737 8.6 12.997 8.6 21.797 0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8 6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2-6.2 6.3-14 9.5-23.6 9.5-9.6 0-17.5-3.2-23.6-9.5-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2 6.3-6.3 13.2-9.6 23.3-10 9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2-6.1 6.3-14 9.5-23.6 9.5-9.6 0-17.4-3.2-23.6-9.5-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2 6.3-6.3 14.1-9.6 23.3-10 9.2.4 17 3.7 23.3 10z"/></svg>
    </a>
  
</div>
      
    </div>
  </div>
</footer>
      
    </div>
    <div class="md-dialog" data-md-component="dialog">
      <div class="md-dialog__inner md-typeset"></div>
    </div>
    
    <script id="__config" type="application/json">{"base": "../../..", "features": ["announce.dismiss", "navigation.tracking", "navigation.tabs", "navigation.sections", "navigation.top", "navigation.footer", "search.suggest", "search.highlight", "search.share", "navigation.expand", "navigation.indexes", "content.tabs.link", "content.tooltips", "content.code.copy", "content.action.edit", "content.action.view", "content.code.annotate"], "search": "../../../assets/javascripts/workers/search.a264c092.min.js", "translations": {"clipboard.copied": "\u5df2\u590d\u5236", "clipboard.copy": "\u590d\u5236", "search.result.more.one": "\u5728\u8be5\u9875\u4e0a\u8fd8\u6709 1 \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.more.other": "\u5728\u8be5\u9875\u4e0a\u8fd8\u6709 # \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.none": "\u6ca1\u6709\u627e\u5230\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.one": "\u627e\u5230 1 \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.other": "# \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.placeholder": "\u952e\u5165\u4ee5\u5f00\u59cb\u641c\u7d22", "search.result.term.missing": "\u7f3a\u5c11", "select.version": "\u9009\u62e9\u5f53\u524d\u7248\u672c"}}</script>
    
    
      <script src="../../../assets/javascripts/bundle.726fbb30.min.js"></script>
      
        <script src="../../../javascripts/extra.js"></script>
      
        <script src="../../../javascripts/mathjax.js"></script>
      
        <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
      
        <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
      
        <script src="../../../ckplayer/js/ckplayer.js"></script>
      
        <script src="https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js"></script>
      
        <script src="https://cdn.jsdelivr.net/npm/mermaid@10.0.2/dist/add-html-label-6e56ed67.min.js"></script>
      
    
    <script src="../../../assets/javascripts/custom.9458f965.min.js"></script>
  
  </body>
</html>