mirror of
https://github.com/Wcowin/Mkdocs-Wcowin.git
synced 2025-07-21 01:16:35 +00:00
2938 lines
240 KiB
HTML
2938 lines
240 KiB
HTML
|
||
<!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">'resize'</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-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"><</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"><</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">></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">'canvas'</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">'snow-canvas'</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">'position: fixed; top: 0; left: 0; overflow: hidden; pointer-events: none; z-index: 256;'</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">""</span><span class="p">).</span><span class="nx">startsWith</span><span class="p">(</span><span class="s1">'filter'</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">'invert(1)'</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">'2d'</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"><</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">'#80EDF7'</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">=></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"><</span><span class="w"> </span><span class="mf">120</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.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">&&</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">'focus'</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-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">'snow start'</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">'blur'</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-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">'snow stop'</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">'keydown'</span><span class="p">,</span><span class="w"> </span><span class="nx">e</span><span class="w"> </span><span class="p">=></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">&&</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">'s'</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">'none'</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">'block'</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">></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"><</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">></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"><</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">'fnr'</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">></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">'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="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">'s'</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">'r'</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">'y'</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">'s'</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">'r'</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"><</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"><</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">'x'</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">'y'</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">'s'</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">'r'</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">'fnx'</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">'fny'</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">'fnr'</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">'canvas'</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">'style'</span><span class="p">,</span><span class="w"> </span><span class="s1">'position: fixed;left: 0;top: 0;pointer-events: none;'</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">'id'</span><span class="p">,</span><span class="w"> </span><span class="s1">'canvas_sakura'</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">'body'</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">'2d'</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"><</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">'x'</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">'y'</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">'r'</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">'s'</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">'fnx'</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">'fny'</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">'fnr'</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">'canvas_snow'</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">"script"</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">"zIndex"</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">"opacity"</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">"color"</span><span class="p">,</span><span class="w"> </span><span class="s2">"0,0,0"</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">"count"</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">></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"><</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">></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"><</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"><</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">&&</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">&&</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"><</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="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">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">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">&&</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">"rgba("</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">","</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">")"</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">"canvas"</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">"c_n"</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">"2d"</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">"position:fixed;top:0;left:0;z-index:"</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">";opacity:"</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">"body"</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">></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->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">"0"</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">"255,255,255"</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">'canvas'</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">'canvas'</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">'2d'</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">'fixed'</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">'rgba('</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">','</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">','</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">', 0.8)'</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"><</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"><</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">></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"><</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">></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"><</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"><</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"><</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">&&</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"><</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">&&</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">></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">&&</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">></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"><</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">&&</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"><</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">&&</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">></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">&&</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">></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"><</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"><</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">'canvas'</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'mousemove'</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">'canvas'</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'mouseleave'</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 © 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> |