貼吧表情雨

前言

目前我的想實現本身的一個項目。正好整合了vue + laravel ，嘗試用下最新的技術。（本人是個PHP Coder）

 由於，一直找不到好的模板，因此我就本身打算搭一個VUE的環境配合iview寫個頁面。也不算寫吧，只是部分排版設計是本身的。畢竟iview大部分組件已經幫你封裝好了，不須要本身實現太多的組件。

廢話，很少說。上真題~~~

 

正文

目前，本身寫好了一個登陸頁的總體部分。

設計以下，中間是登陸框和邀請碼登陸。背景是本文的主體，滑稽雨~~~

登陸上面，是我使用iview實現的走馬燈~~~

萬一這個項目火了呢。我能夠接廣告了呢（人要有夢想，哈哈哈哈哈哈哈哈）~~~~~

圖片以下。不知道怎麼發動圖。。。。

具體說下大致實現方式吧。

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

<script>
export default {
  data () {
    return {
      width: 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 ，若有什麼很差的地方，能夠評論交流。