用canvas在vue实现流星雨效果（移动端）

效果网站最近给女朋友写了一个网站，说这句话呢主要是想显摆我有女朋友，好了进入正题；我写的网站是针对移动端写的所以角度记忆大小，还要劳烦各位亲自改一下。
首先，流星雨就是多个流星下落，然后来想一下他是怎么实现的。它是由流星头和流星尾巴组成，从视觉上来说头是比较亮的，尾巴则是稍暗一点，然后，考虑一下流星是怎么运动的，他首先要有一定的角度，当然垂直往下落我也试了感觉不像，流星雨呢它是由多个不同的流星组成，他们的速度、大小都是随机的，还有他的透明度也要是随机的。咱分析完了，接下来开始逐个实现。
1.首先定义一个流星的类这里涉及到一个js设计模式----工厂模式。我用的是矩形，矩形相比于圆形就是宽高不一样，如此显得更像。因为定义类还是比较简单的这里就不多赘述了，直接上代码。

class liuxing{constructor(prop){this.x = 0;this.y = 0;this.w = 0;this.h = 0;this.vx = 0;this.vy = 0;this.fillStyle = '';this.strokeStyle = "rgba(0,0,0,0)";this.rotation = 20*Math.PI/180;Object.assign(this,prop);return this;}drawLoad(ctx){let {x,y,w,h} = this;

用canvas在vue实现流星雨效果（移动端）相关推荐

刮刮乐html5效果擦除,利用HTML5的画布Canvas实现刮刮卡效果
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...
C++实现黑客帝国流星雨效果
C++实现黑客帝国流星雨效果源代码在这里 #include <windows.h>#define ID_TIMER 1 #define STRMAXLEN 25 //一个显示列的最大长度 ...
vue实现上下滑动翻页_vue 实现滚动到底部翻页效果(pc端)
pc端vue 滚动到底部翻页效果,具体内容如下所示: html: [{{item.code||item.name}}] {{item.name}} js: 先写滚动事件 handleScroll() ...
基于canvas的原生JS时钟效果
概述运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...
s时钟画布 android,Canvas画布实现自定义时钟效果
标题 *{margin:0; padding:0; list-style:none;} .box{ width: 420px; height: 420px; margin: 50px auto 0; ...
canvas实现点线动画效果
效果图需求分析点随机产生并向随机方向以随机的速度匀速移动未点击时,点的总数保持不变:点击时在点击的位置产生数个新的点点与点之间在一定距离内有细线连接鼠标在画面中移动时,能够与其他点产生互动 ...
【粒子动画】iOS流星雨效果如何实现
基于CAEmitterLayer实现从右上方到左下方滑过的流星雨效果 - (void)startRainEmitterAnimations {// 从右向左斜下流星雨CAEmitterLayer * ...
pixi.js 制作流星雨效果
pixi.js 制作流星雨效果 //创建流星们creatShootingStart(){let startNum = 25;//个数this.startSp = [];//星星们的集合//流星消失的 ...
微信小程序动态点赞php,微信小程序小组件基于Canvas实现直播点赞气泡效果
这篇文章主要为大家详细介绍了微信小程序小组件,基于Canvas实现直播点赞气泡效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下先发Canvas实现直播点赞气泡效果图: 实现细节: 1.JS:d ...

用canvas在vue实现流星雨效果（移动端）

用canvas在vue实现流星雨效果（移动端）相关推荐

最新文章

热门文章