用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;
        ctx.beginPath();
        ctx.fillRect(x,y,w,h);
        ctx.closePath();
    }
    rander(ctx){
        let {fillStyle,strokeStyle,x,y,rotation} = this;
        ctx.save();