贴吧表情雨

前言

目前个人想实现自己的一个项目。正好整合了vue + laravel ，尝试用下最新的技术。（本人是个PHP Coder）

 因为，一直找不到好的模板，所以我就自己打算搭一个VUE的环境配合iview写个页面。也不算写吧，只是部分排版设计是自己的。毕竟iview大部分组件已经帮你封装好了，不需要自己实现太多的组件。

废话，不多说。上真题~~~

正文

目前，自己写好了一个登录页的整体部分。

设计如下，中间是登录框和邀请码登录。背景是本文的主体，滑稽雨~~~

登录上面，是我使用iview实现的走马灯~~~

万一这个项目火了呢。我可以接广告了呢（人要有梦想，哈哈哈哈哈哈哈哈）~~~~~

图片如下。不知道怎么发动图。。。。

具体说下大体实现方式吧。

<template>
<canvas width="1325" height="943" id="canvas"></canvas>
</template>

<script>
export default {
  data () {
    return {
       0,   //当前屏幕的宽度
      height: 0,   //当前屏幕的高度
      canvas: {},   //画布
      oGc: {},
      emojiNum: 13,
      rainAry: [],
      rainNum: 150,
      extenstion: '.png',
      baseEmojiPath: '/static/images/funny_rain/'   //图片路径
    }
  },
  created() {
  },  
  mounted() {
    //获取当前窗口的宽、高
    this.watchWidth;   //通过computed属性一直动态的监听当前窗口的宽度
    this.watchHeight;   //动态监听高度
    this.initCanvas();
    this.createRain();
    this.move();
    //todo:全局伸缩页面后，自定义的拓展画布大小，主要通过window.resize来监听实现。但是。我目前没加
  },
  methods: {
    initCanvas() {
      //定义画布
      this.canvas = document.getElementById('canvas');
      this.canvas.setAttribute('width', this.width);
      this.canvas.setAttribute('height', this.height);
      this.oGc = this.canvas.getContext('2d');
    },
    initRain() {
      let _this = this;
      //每个emoji rain 是一个单独的对象
      let rain = {
        init: function(cxt) {
          this.x = _this.random(0,_this.width);   //随机从x轴降落
          this.y = 0;   //y轴
          this.r = 80;   //每个emoji的大小
          this.speed = _this.random(3,5);
          //直接绘制出对应的图片
          let cur_emoji = _this.randomEmoji(1,_this.emojiNum);     //随机出一张emoji
          let cur_emoji_path = _this.baseEmojiPath + cur_emoji + _this.extenstion;
          this.img = new Image();
          this.img.src = cur_emoji_path;
          cxt.drawImage(this.img,this.x,this.y);   
        },
        draw: function(cxt) {
　　　　　　//这里再次绘制，主要是绘制图片的x，y坐标实现动态下落
          cxt.drawImage(this.img,this.x,this.y);
          //画布上展示出对应的emoji
          this.update(cxt);
        },
        update: function(cxt) {
　　　　　　// 当表情没有下落到底部，一直加速下坠
          if (this.y < (_this.height - this.r)) {
            this.y += this.speed;
          } else {
　　　　　　　//重头开始
            this.init(_this.oGc);
          }
        }
      };
      return rain;
    },
    createRain() {
      //通过for循环生成总共的emoji rain
      for(let i = 0;i < this.rainNum;i++) {
        setTimeout(() => {   //通过定时器，出现延迟感。
          let oSnow = this.initRain();
          oSnow.init(this.oGc);
          this.rainAry.push(oSnow);
        }, 100 * i);
      }
    },
    move() {
　　　　//删除之前绘制的像素，不使用的话，你会发现表情下坠的时候会有很多重影
      this.oGc.clearRect(0, 0, this.width, this.height);
      for(var i = 0; i < this.rainAry.length; i++) {
        this.rainAry[i].draw(this.oGc);   //一次性生成好随机的表情对象，就不用一直随机生成了。
      }
      requestAnimationFrame(this.move);   //requestAnimationFrame的性能比setInternal 和setTimeOut好很多，具体请大家百度看看，这貌似是html5新出的API，我也是写这个的时候才发现的、

}, random(min,max) { 
　　return Math.random() * (max - min) + min; 
}, 
randomEmoji(min,max) {
 return Math.floor(Math.random() * (max - min + 1) + min); } 
}, computed: { 
watchWidth: function() { 
　　return this.width = window.innerWidth; 
}, watchHeight: function() { 
　　return this.height = window.innerHeight; 
} 
} 
}
 </script>

github地址：

https://github.com/SnailOwO/v-botTemplate

有兴趣的可以加颗星，谢谢~~~渣渣js coder ，如有什么不好的地方，可以评论交流。