贴吧表情雨

前言

目前个人想实现自己的一个项目。正好整合了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); }, 10 * 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 ,如有什么不好的地方,可以评论交流。