河面上的月亮倒影动画特效

雨点打透心脏的1/2处 2023-02-28 05:27 26阅读 0赞

![在这里插入图片描述][20200720134402839.gif]

css代码

* { 
      margin: 0;
      padding: 0;
    }
    
    canvas#canvas { 
      display: block;
      background: #360033;
      background: -webkit-linear-gradient(to bottom, #0b8793, #360033);
      background: linear-gradient(to bottom, #0b8793, #360033); 
    }

js代码

(function () { 
      'use strict';
      window.addEventListener('load', function () { 
        var canvas = document.getElementById('canvas');
    
        if (!canvas || !canvas.getContext) { 
          return false;
        }
    
        /******************** Random Number ********************/
    
        function rand(min, max) { 
          return Math.floor(Math.random() * (max - min + 1) + min);
        }
    
        /******************** Var ********************/
    
        var ctx = canvas.getContext('2d');
        var X = canvas.width = window.innerWidth;
        var Y = canvas.height = window.innerHeight;
        var mouseX = X / 2;
        var mouseY = Y / 2;
        var shapes = [];
        var shapeNum = Y / 4;
    
        /******************** Animation ********************/
    
        window.requestAnimationFrame =
          window.requestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.msRequestAnimationFrame ||
          function(cb) { 
            setTimeout(cb, 17);
          };
    
        /******************** Shape ********************/
        
        function Shape(ctx, x, y, i) { 
          this.ctx = ctx;
          this.init(x, y, i);
        }
        
        Shape.prototype.init = function(x, y, i) { 
          this.x = x;
          this.y = y;
          this.i = i;
          this.r = 2;
          this.a = rand(0, 360);
          this.rad = this.a * Math.PI / 180;
          this.ga = Math.random() * Math.random() * Math.random();
          this.inA = Math.random();
          this.scaleX = 100 - i / 2;
          this.dist = shapeNum - i;
        };
    
        Shape.prototype.draw = function() { 
          var ctx  = this.ctx;
          ctx.save();
          ctx.fillStyle = 'white';
          ctx.globalCompositeOperation = 'lighter';
          ctx.globalAlpha = this.ga;
          ctx.translate(Math.sin(this.rad) * this.dist + this.x, this.y);
          ctx.scale(this.scaleX, 1);
          ctx.translate(-Math.sin(this.rad) * this.dist - this.x, -this.y);
          ctx.beginPath();
          ctx.arc(Math.sin(this.rad) * this.dist + this.x, this.y, this.r, 0, Math.PI * 2, false);
          ctx.fill();
          ctx.restore();
        };
    
        Shape.prototype.updateParams = function() { 
          this.a += this.inA;
          this.rad = this.a * Math.PI / 180;
        };
    
        Shape.prototype.render = function() { 
          this.updateParams();
          this.draw();
        };
        
        for (var i = 0; i < shapeNum; i++) { 
          var s = new Shape(ctx, X / 2, Y - i * 1, i);
          shapes.push(s);
        }
    
        /******************** Moon ********************/
        
        var radius = 150;
    
        if (X < 768) { 
          radius = 100;
        }
    
        function drawMoon() { 
          ctx.save();
          ctx.beginPath();
          ctx.fillStyle = 'white';
          ctx.shadowColor = 'white';
          ctx.shadowBlur = 100;
          ctx.arc(X / 2, Y / 3, radius, 0, Math.PI * 2, false);
          ctx.fill();
          ctx.restore();
        }
        
        /******************** Kirakira ********************/
    
        var particleNum = 500;
        var particles = [];
        
        function Particle(ctx, x, y) { 
          this.ctx = ctx;
          this.init(x, y);
        }
        
        Particle.prototype.init = function(x, y) { 
          this.x = x;
          this.y = y;
          this.r = rand(5, 10);
          this.ga = Math.random() * Math.random() * Math.random() * Math.random();
          this.v = { 
            x: 0,
            y: -Math.random() * Math.random()
          };
          this.l = rand(10, 50);
        };
    
        Particle.prototype.draw = function() { 
          var ctx  = this.ctx;
          ctx.save();
          ctx.fillStyle = 'white';
          ctx.globalCompositeOperation = 'lighter';
          ctx.globalAlpha = this.ga;
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
          ctx.fill();
          ctx.restore();
        };
    
        Particle.prototype.updateParams = function() { 
          this.a += this.inA;
          this.rad = this.a * Math.PI / 180;
          this.l -= 0.1;
          if (this.l < 0) { 
            this.init(rand(0, X), rand(Y - Y / 4, Y));
          }
        };
    
        Particle.prototype.updatePositon = function() { 
          this.y += this.v.y;
        };
    
        Particle.prototype.render = function() { 
          this.updatePositon();
          this.updateParams();
          this.draw();
        };
        
        for (var i = 0; i < particleNum; i++) { 
          var p = new Particle(ctx, rand(0, X), rand(Y - Y / 4, Y));
          particles.push(p);
        }
    
        /******************** Render ********************/
        
        function render() { 
          ctx.clearRect(0, 0, X, Y);
          drawMoon();
          for (var i = 0; i < shapes.length; i++) { 
            shapes[i].render(i);
          }
          for (var i = 0; i < particles.length; i++) { 
            particles[i].render(i);
          }
          requestAnimationFrame(render);
        }
    
        render();
    
        /******************** Event ********************/
        
        function onResize() { 
          X = canvas.width = window.innerWidth;
          Y = canvas.height = window.innerHeight;
          shapes = [];
          if (X < 768) { 
            radius = 100;
          } else { 
            radius = 150;
          }
          for (var i = 0; i < shapeNum; i++) { 
            var s = new Shape(ctx, X / 2, Y - i * 1, i);
            shapes.push(s);
          }
        }
    
        window.addEventListener('resize', function() { 
          onResize();
        });
    
      });
      // Author
      console.log('');
    })();

html代码

<canvas id="canvas">Canvas not supported.</canvas>

[20200720134402839.gif]: /images/20230209/2d775db49b244c86bab1fbe777f069f7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，26人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3D旋转木马效果+图片倒影特效

CSS3D效果图片倒影特效预览 ![在这里插入图片描述][5e2492a9670d4277a20edd1f0afe30e7.gif_pic_center] 实

Love The Way You Lie/ 2023年10月01日 08:54/ 0 赞/ 125 阅读

相关河面上的月亮倒影动画特效

![在这里插入图片描述][20200720134402839.gif] css代码 { margin: 0; padding: 0;

雨点打透心脏的1/2处/ 2023年02月28日 05:27/ 0 赞/ 27 阅读

相关 128.落叶飘舞动画特效

效果 (源码网盘地址在最后) ![8e48c48172d6734ca7fe49b504585352.gif][] 最近开源了一个 Vue 组件，还不够完善，欢迎大家来一

末蓝、/ 2023年01月05日 05:12/ 0 赞/ 200 阅读

相关环绕倒影加载特效 html+css

先看效果（完整代码在底部）： ![在这里插入图片描述][2021040823330513.gif_pic_center] 实现（可一步一步边看效果边编写）： ※先

淡淡的烟草味﹌/ 2022年11月17日 10:06/ 0 赞/ 243 阅读

相关 168.影视动画特效

效果 (源码网盘地址在最后) ![e61862d9231d8c2b70358ee7721bd22a.gif][] 源码 index.html <!DOC

比眉伴天荒/ 2022年10月09日 03:27/ 0 赞/ 234 阅读

相关 iOS-各种动画特效

概述广播跑马灯/弹幕/直播点赞/烟花/雪花等动画特效, 后续增加~ 详细代码下载：[http://www.demodashi.com/demo/10674.

超、凢脫俗/ 2022年05月31日 09:53/ 0 赞/ 449 阅读

相关 css动画特效的应用详解

动画：定义动画关键帧方案 @keyframes 动画名\{ from\{\} 0%\{ \} …… to 100%\{\} 百分比表示动画播放时

痛定思痛。/ 2022年05月21日 00:58/ 0 赞/ 343 阅读

相关 swiper滑动及动画特效

Swiper基本使用方法：一、加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。二、HTML内容。（我是基于angular1.x）

小咪咪/ 2022年05月16日 02:35/ 0 赞/ 681 阅读

相关 jQuery特效动画

jQuery提供了很多动画效果：控制元素显示与隐藏控制元素淡入和淡出控制元素滑动自定义动画一. 控制元素显示和隐藏以前可以通过css

红太狼/ 2022年03月21日 12:18/ 0 赞/ 369 阅读

相关 HTML5特效动画

7、 [HTML5 Canvas 鼠标滑过3D动画背景][HTML5 Canvas _3D] 在网页中我们经常会设置元素的背景，简单点的设置背景颜色，复杂的就设置背

淡淡的烟草味﹌/ 2022年01月29日 08:57/ 0 赞/ 619 阅读