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