☰

snow

屏保

  1. // ==UserScript==
  2. // @license     弗莱克斯
  3. // @name         snow
  4. // @namespace    http://tampermonkey.net/
  5. // @version      0.1
  6. // @description  屏保
  7. // @match        *://*/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Your code here...
  16.  
  17.     //创建canvas标签
  18.     let snow=document.createElement("canvas");
  19.     snow.setAttribute('id','snow');
  20.     let maxh = window.innerHeight;
  21.     let maxw = window.innerWidth;
  22.     //获取图片
  23.     //     let nimg=new Image()
  24.     //     nimg.src='http://img.netbian.com/file/2021/0304/24f1b123ff78de994241c8822fef48f3.jpg'
  25.     //判断动画执行
  26.     let flag=1;
  27.     snow.style.cssText=`
  28.         width: ${maxw}px;
  29.         height: ${maxh}px;
  30.         position:fixed;
  31.         top:0;
  32.         left:0;
  33.         opacity:1;
  34.        background:rgba(19, 15, 64,0.6);
  35.         transition:all .5s;
  36.         z-index:99999;
  37.     `;
  38.     const PI = Math.PI
  39.     const num = 100;
  40.     snow.height = maxh
  41.     snow.width = maxw
  42.     let ctx = snow.getContext('2d');
  43.     //粒子集合
  44.     let arr = [];
  45.  
  46.     //页面改变时样式
  47.     window.onresize=function(){
  48.         ctx.clearRect(0, 0, maxw, maxh)
  49.         maxw=window.innerWidth;
  50.         maxh=window.innerHeight;
  51.         snow.style.cssText=`
  52.         width: ${maxw}px;
  53.         height: ${maxh}px;
  54.         position:fixed;
  55.         top:0;
  56.         left:0;
  57.         opacity:1;
  58.         transition:all .3s;
  59.        background:rgba(19, 15, 64,0.6);
  60.         z-index:99999;
  61.     `;
  62.         snow.width = maxw;
  63.         snow.height = maxh;
  64.  
  65.     }
  66.     //粒子类
  67.     class snow_point {
  68.         constructor(x, y, r) {
  69.             this.x = x;
  70.             this.y = y;
  71.             this.r = r;
  72.             this.offset = randomOffset();
  73.             this.speed = getRandom(0.4, 0.7);
  74.             this.opacity=0.5+Math.random()*0.5;
  75.             this.offspeed = getRandom(0.025, 0.1);
  76.         }
  77.         //绘制
  78.         draw() {
  79.             this.change()
  80.             ctx.save()
  81.             ctx.beginPath()
  82.             ctx.arc(this.x, this.y, this.r, 0, 2 * PI)
  83.             ctx.fillStyle = `rgba(245, 246, 250,${this.opacity})`;
  84.             ctx.shadowColor = 'rgba(255, 190, 118,1.0)';
  85.             ctx.shadowBlur = 20;
  86.             ctx.fill();
  87.             ctx.restore();
  88.  
  89.         }
  90.         //变化
  91.         change() {
  92.             this.x += this.offset * this.offspeed
  93.             this.y += this.speed
  94.             this.r-=0.0005
  95.             this.opacity-=0.0005;
  96.             this.opacity<0?this.opacity=0:0;
  97.             this.r<0?this.r=0:0;
  98.             if (this.y > maxh) {
  99.                 this.y = -20
  100.             }
  101.         }
  102.  
  103.     }
  104.     //横向偏移
  105.     function randomOffset() {
  106.         let a = Math.sin(Math.random() * PI * 2)
  107.         return a
  108.     }
  109.     //获取两个值直接的随机数
  110.     function getRandom(min, max) {
  111.         return Math.random() * (max - min) + min
  112.     }
  113.     //创建粒子
  114.     function create() {
  115.         for (let i = 0; i < num; i++) {
  116.             let a = new snow_point(getRandom(0, maxw), getRandom(-maxh,maxh), getRandom(1.5, 4.5))
  117.             arr.push(a)
  118.         }
  119.     }
  120.  
  121.     //动画
  122.     function animate() {
  123.         ctx.clearRect(0,0,maxw,maxh)
  124.         arr.forEach((item,index,arr) => {
  125.             if(item.opacity == 0 || item.r == 0){
  126.                 arr.splice(index,1);
  127.                 if(arr.length<200){ //限制最多同屏200个
  128.                     let a = new snow_point(getRandom(0, maxw), getRandom(-maxh, 0), getRandom(1.5, 4.5))
  129.                     arr.push(a)
  130.                 }
  131.             }
  132.         })
  133.         arr.forEach((item,index) => {
  134.             item.draw()
  135.         })
  136.         flag?window.requestAnimationFrame(animate):0
  137.     }
  138.     create()
  139.     animate()
  140.     function fn(){
  141.         snow.removeEventListener('click',fn)
  142.         //透明
  143.         snow.style.opacity=0
  144.         setTimeout(()=>{
  145.             document.body.removeChild(snow)
  146.  
  147.         },300)
  148.  
  149.         flag=0;
  150.  
  151.     }
  152.  
  153.     //再次执行动画
  154.     function doAgain(){
  155.         if(!flag){
  156.             flag=1
  157.             //显示
  158.             snow.style.opacity=1
  159.             animate()
  160.         }
  161.  
  162.     }
  163.     //切换页面出现
  164.     document.onvisibilitychange = function() {
  165.         if (document.visibilityState === 'hidden') {
  166.             document.body.appendChild(snow)
  167.             doAgain()
  168.         }else{
  169.             if(document.getElementById('snow')){
  170.                 snow.addEventListener('click',fn)
  171.             }
  172.         }
  173.     }
  174. })();