{"id":15048554,"url":"https://github.com/2662419405/cnblogs","last_synced_at":"2025-04-10T01:23:21.468Z","repository":{"id":100825211,"uuid":"221385036","full_name":"2662419405/cnblogs","owner":"2662419405","description":"💘🍦🙈  残梦a博客园样式,本博客的样式一直在更新中,还会不断优化页面的加载速度,坚持每周都会更新自己的博客内容,坚持自己选择计算机的道路 -\u003e https://www.cnblogs.com/sunhang32","archived":false,"fork":false,"pushed_at":"2021-08-02T12:33:23.000Z","size":1836,"stargazers_count":47,"open_issues_count":0,"forks_count":23,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-24T03:04:36.100Z","etag":null,"topics":["canvas","css","html","javscript","live2d","md"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/2662419405.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-11-13T06:07:08.000Z","updated_at":"2025-01-16T19:30:48.000Z","dependencies_parsed_at":"2023-03-13T15:31:02.491Z","dependency_job_id":null,"html_url":"https://github.com/2662419405/cnblogs","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2662419405%2Fcnblogs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2662419405%2Fcnblogs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2662419405%2Fcnblogs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2662419405%2Fcnblogs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/2662419405","download_url":"https://codeload.github.com/2662419405/cnblogs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248138607,"owners_count":21053895,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","css","html","javscript","live2d","md"],"created_at":"2024-09-24T21:13:58.786Z","updated_at":"2025-04-10T01:23:21.459Z","avatar_url":"https://github.com/2662419405.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\t\u003ca href=\"https://github.com/2662419405/2662419405.github.io\"\u003e\n\t\t\u003cimg src=\"https://cdn.jsdelivr.net/gh/2662419405/imgPlus/logo-(1).png\" height=\"150\" style=\"max-width:100%;\" /\u003e\n\t\u003c/a\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/release-v.1.3.1-blue\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/issues-0%20open-green\"  /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/stars-32-blue\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/forks-16-blue\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/contributors-1-yellow\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/complete-loding-success\"  /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/last%20commit-yesterday-important\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/link-996icu-red\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/browser-chremo%20|%20firefox%20|%20opera%20|%20safair%20|%20ie\u003e=%209-inactive\" /\u003e\n\u003c/p\u003e\n\n## 欢迎来到残梦博客园\n\n\u003e 说明: 这个样式并非全是自己所写,每个人都学习了一部分\n\n* 博客园网址 : -----\u003e  [博客园网址](https://www.cnblogs.com/sunhang32)\n* 自己如何也弄一个? \u003ca href=\"#使用说明\"\u003e使用说明\u003c/a\u003e\n* 目前有哪些功能? \u003ca href=\"#目前功能\"\u003e目前功能\u003c/a\u003e\n* 效果图啥样? \u003ca href=\"#效果图展示\"\u003e效果图展示\u003c/a\u003e\n* 动动小手点个star呗,让我有动力继续更新下去,感谢感谢^-^!\n\n## 目前功能\n\n* :octocat: 键盘按下效果\n* :apple: 鼠标指针改变\n* :tangerine: 导航栏自定义\n* :cherries: 恶搞标题\n* :banana: 看板娘-猫\n* :peach: 音乐-网易云\n* :pineapple: 左侧点击弹出\n* :watermelon: 页面顶部滚动进度\n* :grapes: 点击页面跳动可爱的文字\n* :tomato: 随笔背景特效\n* :pear: 响应式开发\n* :book: 网站运行时间\n* :shaved_ice: 动态线条背景\n* :strawberry: 背景线条特效\n* :baby:代码雨\n* :peach: DaoVoice聊天\n* :sparkles: 自动打代码功能\n* :memo: 欢迎访问的人描述\n* :green_heart: 全屏文字抖起来\n* :fire: 点击页面显示小豆子\n* :lemon: 右上角关注github\n\n##  效果图展示\n\n\u003e 电脑端效果图\n\n\u003cimg src=\"/img/Snipaste_2019-12-24_15-35-28.png\" alt=\"电脑端效果图\" /\u003e\n\n\u003e 手机端效果图\n\n\u003cimg src=\"/img/Snipaste_2019-12-24_15-35-56.png\" alt=\"手机端效果图\" /\u003e\n\n## 如果感觉勉强可以看几眼的话,那么你也来做一个吧\n\n### 使用说明\n\n* 首先你要有一个[博客园](https://www.cnblogs.com)(估计会`github`的都应该知道了)\n* 在[博客园](https://www.cnblogs.com)的官网左上角开通博客园\n* 博客园的个人配置页面-\u003e先申请js权限\n* 禁用页面的css样式\n* 选择博客主题  SimpleMemory\n\n\u003e 以下是代码配置\n\n* 粘贴代码到定制页面css代码中 [css](/css/sh.css)\n\n* 粘贴博客侧面公告代码\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://blog-static.cnblogs.com/files/sunhang32/pio.css\" /\u003e\n\u003cscript type=\"text/javascript\"\u003e\n    window.cnblogsConfig = {\n        GhVersions    : 'v1.2.0', // 版本\n        blogUser      : \"残梦\", // 用户名\n        essayCodeHighlightingType: \"highlightjs\",\n        essayCodeHighlighting: \"vs2015\",\n        homeTopImg: [\n           \"http://img.shtodream.cn/37.jpg\"\n        ],\n         menuUserInfoBgImg: 'https://bndong.github.io/images/menu_bg.gif',\n         menuNavList: [ // 列表数据 ['导航名称', '链接']\n             ['github', 'https://github.com/2662419405'],\n             ['CSDN', 'https://blog.csdn.net/qq_43268396'],\n             ['技能树', 'https://shtodream.cn/about/'],\n             ['留言板', 'https://shtodream.cn/message/'],\n        ],\n        fontIconExtend: \"//at.alicdn.com/t/font_543384_ezv3l7gd9r7.css\",  //字体图标扩展\n        webpageTitleOnblur        : \"(◍´꒳`◍)你为何狠心离去 \", // 当前页失去焦点，页面title显示文字\n        webpageTitleOnblurTimeOut : 500, // 当前页失去焦点，页面title变化，延时时间，单位毫秒\n        webpageTitleFocus         : \"(*´∇｀*) 帅的人回来了！\", // 当前页获取焦点，页面title显示文字，显示后延时恢复原title\n        webpageTitleFocusTimeOut  : 2000, // 当前页获取焦点，页面title变化，延时时间，单位毫秒\n        blogAvatar    : \"https://cdn.jsdelivr.net/gh/2662419405/CDN@1.0/sh.jpg\", // 用户头像\n        blogStartDate : \"2019-11-07\", // 入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间\n    }\n\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v1.2.0/src/script/simpleMemory.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e(function(i,s,o,g,r,a,m){i[\"DaoVoiceObject\"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset=\"utf-8\";m.parentNode.insertBefore(a,m)})(window,document,\"script\",('https:' == document.location.protocol ? 'https:' : 'http:') + \"//widget.daovoice.io/widget/bd4254a0.js\",\"daovoice\")\u003c/script\u003e\n\u003cscript\u003e\ndaovoice('init', {\n  app_id: \"bd4254a0\"\n});\ndaovoice('update');\n\u003c/script\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.jsdelivr.net/gh/2662419405/CDN/pio.css\" /\u003e\n```\n\n* 粘贴页首代码 \n```html\n\u003cdiv class=\"pio-container\" style=\"left: 50px; bottom: 50px;\"\u003e\n\t\u003cdiv class=\"pio-action\"\u003e\u003c/div\u003e\n\t\u003ccanvas id=\"pio\" style=\"opacity: 0.6;\" width=\"200px\" height=\"200px\"\u003e\u003c/canvas\u003e\n\u003c/div\u003e\n\u003cbutton id=\"btn1\"\u003e皮一下\u003c/button\u003e\n\u003ccanvas id=\"content_canvas\" width=\"1440\" height=\"900\" style=\"opacity:0.7;\" \u003e\u003c/canvas\u003e\n```\n\n* 粘贴页脚代码 \n```html\n\u003c!-- 滚动进度 --\u003e\n\u003cdiv id=\"bottomProgressBar\"\u003e\u003c/div\u003e\n\u003c!--  文字抖动 --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/2662419405/CDN/dou.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/2662419405/CDN/douPlus.js\"\u003e\u003c/script\u003e\n\u003c!-- 音乐菜单 --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://blog-static.cnblogs.com/files/elkyo/APlayer.min.css\"\u003e\n\u003cdiv id=\"player\" class=\"aplayer aplayer-withlist aplayer-fixed\" data-id=\"5033426460\" data-server=\"netease\" data-type=\"playlist\" data-order=\"random\" data-fixed=\"true\" data-listfolded=\"true\" data-theme=\"#2D8CF0\"\u003e\u003c/div\u003e\n\u003cscript src=\"https://blog-static.cnblogs.com/files/elkyo/APlayer.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://blog-static.cnblogs.com/files/elkyo/Meting.min.js\"\u003e\u003c/script\u003e\n\u003c!-- 网站运行时间 --\u003e\n\u003cp style=\"text-align:center;\"\u003e\u003cspan id=\"timeDate\"\u003e载入天数...\u003c/span\u003e\u003cspan id=\"times\"\u003e载入时分秒...\u003c/span\u003e\u003c/p\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/2662419405/CDN/time.js\"\u003e\u003c/script\u003e\n\u003c!-- 右下角菜单 --\u003e\n\u003cdiv id=\"rightMenu\"\u003e\u003c/div\u003e\n\u003c!--看板娘 - 猫--\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/2662419405/CDN/l2dPlus.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/2662419405/CDN/pioPlus.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/2662419405/CDN/mao1.js\"\u003e\u003c/script\u003e\n\u003c!-- 线条效果(推荐关闭这个特效,对于手机端影响过大) --\u003e\n\u003cscript type=\"text/javascript\" color=\"220,220,220\" opacity='0.9' zIndex=\"-2\" count=\"100\" src=\"//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js\"\u003e\n\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"https://blog-static.cnblogs.com/files/sunhang32/ce.js\"\u003e\u003c/script\u003e\n\u003c!-- 文字显示 --\u003e\n\u003cscript type=\"text/javascript\" src=\"https://files.cnblogs.com/files/sunhang32/myText.js\"\u003e\u003c/script\u003e\n\u003c!-- 输入框特效 --\u003e\n\u003cscript type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/gh/2662419405/CDN/blog.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/gh/2662419405/CDN/POW.js\"\u003e\u003c/script\u003e\n\u003c!--  自动输入文字 --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/typed.js@2.0.11\"\u003e\u003c/script\u003e\n\u003cscript\u003e\nwindow.onload=function(){\n\t$(\".vertical\").append(\"\u003cdiv id='shContent'\u003e\u003cspan id='subtitle'\u003e\u003c/span\u003e\u003cspan id='typed-cursor'\u003e\u003c/span\u003e\u003c/div\u003e\")\n\tvar typed=new Typed(\"#subtitle\",{strings:[\"Live a good life, write some good code !!!\",\"愿自己的努力终将获得回报\",\"花开不是为了花落，而是为了开的更加灿烂。\",\"没有伞的孩子必须努力奔跑！\",\"欲望以提升热忱，毅力以磨平高山。\",\"如果放弃太早，你永远都不知道自己会错过什么。\",\"没有礁石，就没有美丽的浪花；没有挫折，就没有壮丽的人生。\"],startDelay:1000,typeSpeed:100,loop:!0,backSpeed:60,backDelay:2000,showCursor:!0})\n}\n\u003c/script\u003e\n\u003c!--点击冒点--\u003e\n\u003ccanvas width=\"1777\" height=\"841\" style=\"position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;\"\u003e\u003c/canvas\u003e\u003cscript src=\"https://cdn.jsdelivr.net/gh/2662419405/CDN/maopao.js\"\u003e\u003c/script\u003e\n\u003c!--关注github--\u003e\n\u003cscript type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/gh/2662419405/CDN/githubfork1.js\"\u003e\u003c/script\u003e\n\u003c!--代码雨--\u003e\n\u003cscript type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/gh/2662419405/CDN/daimayu2.js\"\u003e\u003c/script\u003e\n\u003c!-- 速度优化脚本 --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/TRHX/CDN-for-itrhx.com@2.0.6/js/instantclick-1.2.2.js\"\u003e\u003c/script\u003e\n```\n\n##### 如果配置成功了,不妨点个赞,咱们一起开心一下,有问题可以发issues^-^\n\n*--------------如果你对你的代码不满意的话,可以接下来自定义设置----------------*\n\n### 下面是DIV定制\n\n* 背景线条特效(这个比较耗费性能,尽量少用,对于手机端影响更大一些)\n```js\n\u003cscript type=\"text/javascript\"\ncolor=\"220,220,220\" opacity='0.7' zIndex=\"-2\" count=\"500\" src=\"//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js\"\u003e\n\u003c/script\u003e\n//color 颜色\n//opacity 透明度\n//zIndex 层级(一般为负数)\n//count数量\n```\n\n* 输入框特效\n\n```js\n\u003cscript type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/gh/2662419405/CDN/blog.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/gh/2662419405/CDN/POW.js\"\u003e\u003c/script\u003e\n```\n\n* 点击屏幕显示文字特效\n\n```js\n\u003cscript type=\"text/javascript\" src=\"https://files.cnblogs.com/files/sunhang32/myText.js\"\u003e\u003c/script\u003e\n```\n\n* 背景音乐\n```js\n\u003clink rel=\"stylesheet\" href=\"https://blog-static.cnblogs.com/files/elkyo/APlayer.min.css\"\u003e\n  \u003cdiv id=\"player\" class=\"aplayer aplayer-withlist aplayer-fixed\" data-id=\"5033426460\" data-server=\"netease\" data-type=\"playlist\" data-order=\"random\" data-fixed=\"true\" data-listfolded=\"true\" data-theme=\"#2D8CF0\"\u003e\u003c/div\u003e\n  \u003cscript src=\"https://blog-static.cnblogs.com/files/elkyo/APlayer.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://blog-static.cnblogs.com/files/elkyo/Meting.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n$(\".aplayer-play\").click()   // 如果想让歌曲在页面加载完播放可以设置\n\u003c/script\u003e\n```\n\n\u003e 修改音乐只需要修改data-id即可\n\n\u003cimg src=\"https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-12-17_07-59-05.png\" /\u003e\n\u003cimg src=\"https://cdn.jsdelivr.net/gh/2662419405/imgPlus/Snipaste_2019-12-17_07-59-34.png\" /\u003e\n\n* 猫\n```js\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.jsdelivr.net/gh/2662419405/CDN/pio.css\" /\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/2662419405/CDN/l2dPlus.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/2662419405/CDN/pioPlus.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/2662419405/CDN/mao.js\"\u003e\u003c/script\u003e\n```\n\n\u003e 目前猫还存在一点小的bug,但不影响正常使用,我也在不断改进中^-^\n* 右侧直接聊天功能\n\n```js\n\u003cscript\u003e(function(i,s,o,g,r,a,m){i[\"DaoVoiceObject\"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset=\"utf-8\";m.parentNode.insertBefore(a,m)})(window,document,\"script\",('https:' == document.location.protocol ? 'https:' : 'http:') + \"//widget.daovoice.io/widget/bd4254a0.js\",\"daovoice\")\u003c/script\u003e\n\u003cscript\u003e\ndaovoice('init', {\n  app_id: \"bd4254a0\"\n});\ndaovoice('update');\n\u003c/script\u003e\n```\n\n这里面的的app_id请到 \u003ca href=\"http://dashboard.daovoice.io/app/bd4254a0/settings/install\"\u003edaovoice网站注册获得\u003c/a\u003e\n\n* 添加github关注\n自己去这里面\u003ca href=\"https://blog.github.com/2008-12-19-github-ribbons/\"\u003e选择自己喜欢的样式\u003c/a\u003e,修改一下自己的github链接,之后添加到页面即可\n\n* 网站运行时间\n```html\n\u003c!-- 网站运行时间 --\u003e\n\u003cp style=\"text-align:center;\"\u003e\u003cspan id=\"timeDate\"\u003e载入天数...\u003c/span\u003e\u003cspan id=\"times\"\u003e载入时分秒...\u003c/span\u003e\u003c/p\u003e\n\u003cscript\u003e\n    var now = new Date(); \n    function createtime() { \n        var grt= new Date(\"11/06/2019 17:38:00\");//在此处修改你的建站时间\n        now.setTime(now.getTime()+250); \n        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); \n        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); \n        if(String(hnum).length ==1 ){hnum = \"0\" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); \n        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = \"0\" + mnum;} \n        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); \n        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = \"0\" + snum;} \n        document.getElementById(\"timeDate\").innerHTML = \"本站勉强运行 \"+dnum+\" 天 \"; \n        document.getElementById(\"times\").innerHTML = hnum + \" 小时 \" + mnum + \" 分 \" + snum + \" 秒\"; \n    } \nsetInterval(\"createtime()\",250);\n\u003c/script\u003e\n```\n\n\u003e 上面的实现修改为自己创建网站的时间,把 p 标签插入到想要显示的区域即可\n\n* 配置代码雨 \n1. 追加css\n```css\n#content_canvas {\n  position: fixed;\n  right: 0px;\n  bottom: 0px;\n  min-width: 100%;\n  min-height: 100%;\n  height: auto;\n  width: auto;\n  z-index: -1;\n}\n```\n\n2. 页首html代码追加\n```html\n\u003ccanvas id=\"content_canvas\" width=\"1440\" height=\"900\" \u003e\u003c/canvas\u003e\n```\n\n3. 页面底部追加代码\n```js\n\u003cscript\u003e\nwindow.onload = function(){\n    //获取画布对象\n    var canvas = document.getElementById(\"content_canvas\");\n    //获取画布的上下文\n    var context =canvas.getContext(\"2d\");\n    var s = window.screen;\n    var W = canvas.width = s.width;\n    var H = canvas.height;\n    //获取浏览器屏幕的宽度和高度\n    //var W = window.innerWidth;\n    //var H = window.innerHeight;\n    //设置canvas的宽度和高度\n    canvas.width = W;\n    canvas.height = H;\n    //每个文字的字体大小\n    var fontSize = 12;\n    //计算列\n    var colunms = Math.floor(W /fontSize);\t\n    //记录每列文字的y轴坐标\n    var drops = [];\n    //给每一个文字初始化一个起始点的位置\n    for(var i=0;i\u003ccolunms;i++){\n        drops.push(0);\n    }\n    //运动的文字\n    var str =\"sh\";\n    //4:fillText(str,x,y);原理就是去更改y的坐标位置\n    //绘画的函数\n    function draw(){\n        context.fillStyle = \"rgba(238,238,238,.08)\";//遮盖层\n        context.fillRect(0,0,W,H);\n        //给字体设置样式\n        context.font = \"600 \"+fontSize+\"px  Georgia\";\n        //给字体添加颜色\n        context.fillStyle = [\"#33B5E5\", \"#0099CC\", \"#AA66CC\", \"#9933CC\", \"#99CC00\", \"#669900\", \"#FFBB33\", \"#FF8800\", \"#FF4444\", \"#CC0000\"][parseInt(Math.random() * 10)];//randColor();可以rgb,hsl, 标准色，十六进制颜色\n        //写入画布中\n        for(var i=0;i\u003ccolunms;i++){\n            var index = Math.floor(Math.random() * str.length);\n            var x = i*fontSize;\n            var y = drops[i] *fontSize;\n            context.fillText(str[index],x,y);\n            //如果要改变时间，肯定就是改变每次他的起点\n            if(y \u003e= canvas.height \u0026\u0026 Math.random() \u003e 0.99){\n                drops[i] = 0;\n            }\n            drops[i]++;\n        }\n    };\n    function randColor(){//随机颜色\n        var r = Math.floor(Math.random() * 256);\n        var g = Math.floor(Math.random() * 256);\n        var b = Math.floor(Math.random() * 256);\n        return \"rgb(\"+r+\",\"+g+\",\"+b+\")\";\n    }\n    draw();\n    setInterval(draw,35);\n};\n\u003c/script\u003e\n```\n\n\u003e 更多的本人效果,可以浏览本人-\u003e \u003ca href=\"https://sunhang.top\"\u003e学习博客\u003c/a\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F2662419405%2Fcnblogs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F2662419405%2Fcnblogs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F2662419405%2Fcnblogs/lists"}