领导活动之时光。该品种因此到的知识点包括。接电话的女孩说。

     

  原文地址:http://jeffzhong.space/2017/10/26/solar/
  学习canvas有一段时间了,顺便写单稍项目练手,该项目用到之知识点包括:

1.

     
 我就几龙因为家庭断网,都走去星巴克写推送,昨天自家隔壁沙发坐正简单独女孩闲聊天。其中一个女孩接了单电话,说:“我无火啊,没有啊,啊,你还有事也?你空我有事。”挂了下,另外一个女孩问:“你男朋友也?你为何不说生气的因由啊,刚刚与本身说了过多什么。”接电话的女孩说:“他五音不全啊?他无明了自家发脾气,还叩问我一气之下没?气死我了。”

     
 我听见这,满脸的冷汗,明明即令是殊火啊,干嘛不说,偏要对方去想,又非是肚子里之蛔虫怎么猜的下呀,这不是友善找罪受吗?似乎居多之女生还出同等种于带属性,叫做口是心非。

         我,也这样。

       
不晓你们记不记得,分手时,他跟自说,和你在共最累了。现在想,天天猜我怀念使什么,确实非常辛苦的吧。

       
什么样的女孩太矫情,就是心灵怎么想的常有还不说,偏于旁人猜的女儿!你心根本就是未是那想的,那你嘴上为何而那说。

图片 1

  1. ES6面向对象
  2. 主干的三角函数
  3. canvas部分来:坐标变换,渐变,混合模式,线条与图纸的绘图。

2.

        我那么时候天天在家,不做事。他晚上下班来衔接自失去用。

       
正在热播《我的少女时代》那时候,我特意想看。正好打算去用的哪家商场楼上就来影院,上电梯时,我及他说:“想看录像”。

         他说:“上班好累,能无克周末还拘留。”

        我说:“啊,行。”

       
 可是说实在,我更是想更火,他强烈回家吗无困啊!也是以家玩游戏啊,怎么就非能够陪同自己看电影,回家玩游戏就行也。

         气的本人说:“我非思量吃饭了。回去吧。”

        他同脸懵逼:“你怎么了?好好的干什么非吃白米饭了什么?”

        我说:“就是匪思吃什么,回去吧,我不馁了。”

       
 我转身下电梯,他撇着自:“你说,你怎么回事啊?怎么美的就是无吃米饭了哟。”

      “你别倒呀,你讲啊,你怎么了哟?”

     
 “我开车到你小堵车一个多钟头,就为跟你吃饭,咱们俩更开到这同时一个点,你就不吃了啊?”

        “那若不挨饿啊”

        我未讲,甩开他即便于停车场走,他同每当末端说,一路随即自己。

   
 我回车里,觉得特别委屈。我在家等了一致天,为了当他用餐,结果想看个影都未伴随自己错过,玩游戏就执行,我还从来不娱乐主要呢?车起至我家楼下,下车开门就倒了。

         他呢火了,一路啊远非谈。

        我下车就起哭,哭了同等晚,直到第二上夜晚,他来我家楼下道歉。

        他看自己消气了,问我:“你昨天到底坐什么生气啊?”

        我特意怪他甚至不知底!

        我说:“因为您说勿看录像什么!你还能够回家玩游戏,为什么非伴随我呀!”

       
他专程无奈:“我那么问您,你都未说。你特别怀念看,就去呗。我就算是坐的累,想回家躺会儿。”

        陪领导喝酒,
吐得天花乱坠得我看到天使在舞蹈,然而努力爬起披在毯子,空调也生了。

实际效果: solar
system(推荐在chrome或safari下运行)

图片 2

3.

     
现在心想,我真是有身患哟,不就是是平等场电影呢,我莫乐意就径直说呗,为什么而会回家玩游戏,不能够陪同我看电影。就算今天非看,约明天为是同啊。他开始了那么多之车,结果充分了同样接气,饿着肚子回家,而且连为什么生气都非清楚,换谁都见面傻逼吧。

     
 有时候,晚上己上床不正,躺下来回忆当年之好,真矫情!其实这种例子简直铺天盖地。

       
有一个星期本人怀念回大连,但他俩单位发生动未放假,需要串休,问我能免可知等等。我说:“啊,没事,那就是不失去了啊。”但骨子里自己心目一点吧未喜,因为非常周末有BigBang演唱会啊,我是怀念去看BinBang的演唱会啊,所以于星期日,我无言以对,自己打了演唱会的批,自己跑至大连错过押。

     
他提问我去大连提到嘛吗,我莫说。他专门恼火,问我干什么非报告他,自己飞出来吗无说一样信誉。我也特地恼火,我都问他去不失去了,还未失,还大我?

       
所以整场演唱会,我一直以跟外发信息相互埋怨。看的意不嗨,而且全场自己去看演唱会的,就自我一个,人家都是朋友啊,朋友啊,超级孤单!演唱会结束,我一个总人口于酒店住了同等继,感觉自己专门凄惨,越想进一步火,和他抬一宿,一边吵一边哭,自己管酒楼冰箱里的啤酒都喝了,气之躺在床上便想说分手。

     
 他问我:“你干吗未说,你想去看演唱会,你说自怎么掌握有演唱会啊,我连他们几只人本人还没认全。”

        剩下哪怕重不要取了:

        今晚想吃吗,随意啊,结果吃的莫轻吃;

    你想去啊,都推行啊,结果错过之地方看乏味;

      过生日而想使什么礼物?随便什么,结果请的少数吗不喜欢;

       圣诞若想怎么了什么,你说吧,结果了得一些啊非乐意。

        就以这么一个冷得夜, 
做了平摆放带有酒气的表,邮箱里展示发送成功。

场景

  首先成立场景类,主要为此来集团管理对象,统一更新和制图对象。这里运用了ES6的类语法,构造函数建立目标列表属性planets,绘制背景方法drawBG,使用requestAnimationFrame反复实践的卡通片方法animate

  绘制背景下及了往渐变:createRadialGradient(x1,y1,r1,x2,y2,r2);
该渐变主要用以创造两个圆相交过渡效果,如果前后两单圆心相同(x1==x2 &&
y1==y2),则会组织同心圆样式的渐变。
这样咱们尽管为烨也核心的艳情调渐变及黑色,最后所以fillRect填充整个背景。

    //场景
    class Stage {
        constructor(){
            this.planets=[];
        }
        init(ctx){
            ctx.translate(W/2,H/2);//坐标重置为中间
            this.animate(ctx);
        }
        //绘制背景
        drawBG(ctx){
            ctx.save();
            ctx.globalCompositeOperation = "source-over";
            var gradient=ctx.createRadialGradient(0,0,0,0,0,600);
            gradient.addColorStop(0,'rgba(3,12,13,0.1)');
            gradient.addColorStop(1,'rgba(0,0,0,1');
            ctx.fillStyle=gradient;
            // ctx.fillStyle='rgba(0,0,0,0.9)';
            ctx.fillRect(-W/2,-H/2,W,H);
            ctx.restore();
        }
        //执行动画
        animate(ctx){
            var that=this,
                startTime=new Date();
            (function run(){
                that.drawBG(ctx);
                that.planets.forEach(item=>{
                    item.update(startTime);
                    item.draw(ctx);
                });
                requestAnimationFrame(run);
            }());
        }
    }

4.

        还有户肯定曾经承诺了,却假装客气:

       
——今晚夜间本身随同你失去逛街,诶呀不用啦,我懂乃忙,我要好便实行,结果的确没有来,气成了狗;

       
 ——你明晚几接触飞机,我错过搭你,接什么呀,我都这么大人了,你别折腾啦,我力所能及实施,最后真的不来接,打车的时候气的骂一路;

     
 ——晚上自我受您做饭吧,你想吃什么,我失去准备准备,做什么饭呀,那么难,有这样心便行呐,随便吃相同人数吧,结果真没有开,随便吃的下单方面吃一边埋怨,你切莫说公做饭为?

       
——你想使谁,我吓购买,便宜的尽管推行,省点钱得矣,结果真的买了便民的,买回来之后一点吗无喜欢。

     
真的,现在想想,我最为矫情了。明明中心不是那想的,可嘴上偏要那么说,还要别人猜中心思,猜不吃尽管冒火。

        也未知情好是哪里来的底气,能有胆一直愿意别人吃本人惊喜。

       
睡意全无,酒醒十分,煮面的时节,音乐播放着说散就散的时刻,决定明天送了领导去押前任…….

星球

  然后起星球基类,除构造函数,还有创新位置角度的方Update,对象绘制方法draw。之后有所的星,都见面初始化该类或者连续该类建立针对诺星球。

  行星绕太阳做圆周运动,这个好为此三角函数根据角度和半径求出x,y,但还有更加便民的法子,那就算是采用canvas提供的坐标旋转方式rotate,以360过为一个周期。

    /**
     * 星球基类
     */
    class Planet{
        /**
         * @param  {Number} x         x坐标
         * @param  {Number} y         y坐标
         * @param  {Number} r         半径
         * @param  {Number} duration  周期(秒)
         * @param  {Object} fillStyle 
         * @param  {Object} blurStyle 
         */
        constructor(x,y,r,duration,fillStyle,blurStyle){
            this.x=x;
            this.y=y;
            this.r=r;
            this.duration=duration;
            this.angle=0;
            this.fillStyle=fillStyle;
            this.blurStyle=blurStyle;
        }
        update(startTime){
            this.angle=Tween.linear(new Date()-startTime,0,Math.PI*2,this.duration*1000);
        }
        draw(ctx){
            ctx.save();
            ctx.rotate(this.angle);
            // ctx.translate(this.x,this.y);
            drawCircle(this.x,this.blurStyle.color);
            ctx.beginPath();
            // ctx.globalCompositeOperation = "lighter";
            ctx.fillStyle=this.fillStyle;
            ctx.shadowColor=this.blurStyle.color;
            ctx.shadowBlur=this.blurStyle.blur;             
            // ctx.arc(0,0,this.r,Math.PI*2,false);
            ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false);
            ctx.fill();
            ctx.restore();
        }
    };

5.

       我眷恋,以后要是再次谈恋爱,这种起码的左再也不会犯了。

       
不喜自己便会说:“我怀念为您陪自己去看个影什么!”“我怀念吃火锅啊!”“当然是深贵的担保啊!”“我期望与而在一起呀。”这就是我发脾气的原由啊!

      所有的关联变淡的来由无都是,一个免说,一个请勿问,更何况问了邪不说。

       所以,如果还有下同样次于,我实在不会见了。

        所有的矫情都来自你,可有的分手都坐好。

图表发长草的心弦

        领导活动之时段,我凝视了要命悠久,脸上一直挂在尴尬不错过礼貌之微笑。

太阳

  开始另起炉灶第一只对象-太阳,继承上面的繁星基类Planet,重写draw方法

    /**
     * 太阳
     */
    class Sun extends Planet{
        draw(ctx){
            ctx.save();
            ctx.beginPath();
            ctx.globalCompositeOperation = "source-over";
            ctx.fillStyle=this.fillStyle;
            ctx.shadowColor=this.blurStyle.color;
            ctx.shadowBlur=this.blurStyle.blur;             
            ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false);
            ctx.fill();
            ctx.restore();  
        }
    }

       
抖音上那些圈了前任后,一个个哭的不可开交去生活来得无乐意去,不了解看前任死了。

土星

  土星有美妙之土星环,所以呢继承来一个单身的类,重写draw方法,其中土星环比较累,建立了好多颜料节点的为渐变。

    /**
     * 土星
     */
    class Saturn extends Planet{
        draw(ctx){
            ctx.save();
            ctx.rotate(this.angle);
            drawCircle(this.x,this.blurStyle.color);

            ctx.beginPath();
            ctx.fillStyle=this.fillStyle;           
            ctx.arc(this.x,this.y,this.r,Math.PI*2,false);
            ctx.fill();

            //土星光环
            ctx.globalCompositeOperation = "source-over";
            var gradient=ctx.createRadialGradient(this.x,this.y,0,this.x,this.y,this.r+25);
            var startStop=(this.r+3)/(this.r+24);
            gradient.addColorStop(startStop,'#282421');
            gradient.addColorStop(startStop+0.06,'#282421');
            gradient.addColorStop(startStop+0.1,'#7e7966');
            gradient.addColorStop(startStop+0.18,'#706756');
            gradient.addColorStop(startStop+0.24,'#7e7966');
            gradient.addColorStop(startStop+0.25,'#282421');
            gradient.addColorStop(startStop+0.26,'#282421');
            gradient.addColorStop(startStop+0.27,'#807766');
            gradient.addColorStop(1,'#595345');
            ctx.fillStyle=gradient;
            ctx.beginPath();
            ctx.arc(this.x,this.y,this.r+24,0,Math.PI*2,true);
            ctx.arc(this.x,this.y,this.r+3,0,Math.PI*2,false);
            ctx.fill();
            ctx.restore();  
        }
    }

       
没有前人的我来拘禁前任,只是想知道听了一个夏的《说散就解除》,歌曲以影片什么演绎。然而,电影里的他俩尚无说散就免去,一直的拖到结尾两丁在用各自应的办法来发表爱意后,突然就脱了。

树星球

  接着开初始化星球对象,包括太阳和八大行星,然后所有的繁星颜色都使用了往渐变,这样更的美。这里叫起阳光,水星,土星的例证,其他的行星如此类推。

    // 初始化场景类
    var stage=new Stage();

    // sun
    var sunStyle=ctx.createRadialGradient(0,0,0,0,0,60);
    sunStyle.addColorStop(0,'white');
    sunStyle.addColorStop(0.5,'white');
    sunStyle.addColorStop(0.8,'#ffca1e');
    sunStyle.addColorStop(1,'#b4421d');
    var sun=new Sun(0,0,60,0,sunStyle,{color:'#b4421d',blur:300});
    stage.planets.push(sun);

    // mercury
    var mercuryStyle=ctx.createRadialGradient(100,0,0,100,0,9);
    mercuryStyle.addColorStop(0,'#75705a');
    mercuryStyle.addColorStop(1,'#464646');
    var mercury=new Planet(100,0,9,8.77,mercuryStyle,{color:'#464646'});
    stage.planets.push(mercury);


    //saturn 
    var saturnStyle=ctx.createRadialGradient(500,0,0,500,0,26);
    saturnStyle.addColorStop(0,'#f2e558');
    saturnStyle.addColorStop(1,'#4c4a3b');
    var saturn =new Saturn(500,0,26,1075.995,saturnStyle,{color:'#4c4a3b'});
    stage.planets.push(saturn);

       
那同样段落我打动了,也许余飞说之对,一个未留,一个觉得对方未见面动。就这样显然尚好在对方的个别丁,谁也未认输的,耗到电影终极。

小行星带

  当然还有火星与木星之间的小行星带,同理继承星球基类,这里以了图像混合模式globalCompositeOperation,使用xor可以跟背景对比度没那突然。当然还起另外属性值,比如source-over,
lighter等。这里我们随便大成了300独对象,一样填充进场景类的planets属性统一更新绘制。

    /**
     * 小行星
     */
    class Asteroid extends Planet{
        draw(ctx){
            ctx.save();
            ctx.rotate(this.angle);
            ctx.beginPath();
            ctx.globalCompositeOperation = "xor";
            ctx.fillStyle=this.fillStyle;           
            ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false);
            ctx.fill();
            ctx.restore();  
        }
    }

    function createAsteroids(){
        var asteroid=null,
            x=300,y=0, r=2,rd=300,
            angle=0, d=283, 
            color='#fff';
        for(var i=0;i<400;i++){
            rd=Random(300,320);
            angle=Random(0,Math.PI*2*1000)/1000;
            x=Math.round(Math.cos(angle)*rd);
            y=Math.round(Math.sin(angle)*rd);
            r=Random(1,3);
            d=Random(28.3,511);
            color=getAsteroidColor();
            // console.log(angle,color);
            asteroid = new Asteroid(x,y,r,d,color,{color:color,blur:1});
            stage.planets.push(asteroid);
        }
    }

       
也许他们易于的深沉,爱之尖锐,说散就散的胆略梁静茹没有让他们,也许他们还以相当对方先开口,就类似陈奕迅的《阿牛》:你说话就待肯做,差一刹和自捡扭老好,不甘心,
尤其这新婚,就比如娱乐牺牲,想过快新娘,我差点讲真,历史一刻已经拿旧伴侣转送别人。

彗星

  基本快完成了,但咱除了,可以再补偿加开椭圆运动的彗星,这样更加酷。一样自由大成20单彗星填充进场景类统一更新绘制。

    /**
     * 彗星
     */
    class Comet {
        constructor(cx,cy,a,b,r,angle,color,duration){
            this.a=a;
            this.b=b;
            this.r=r;
            this.cx=cx;
            this.cy=cy;
            this.x=0;
            this.y=0;
            this.color=color;
            this.angle=angle;
            this.duration=duration;
        }
        update(startTime){
            var t=Tween.linear(new Date()-startTime,0,Math.PI*2,this.duration*1000);
            this.x=this.cx+this.a*Math.cos(this.angle+t);
            this.y=this.cy+this.b*Math.sin(this.angle+t);
        }
        draw(){
            ctx.save();
            ctx.rotate(this.angle);
            //画运动轨迹
            ctx.lineWidth=0.5;
            ctx.strokeStyle='rgba(15,69,116,0.2)';
            Shape.ellipse(ctx,this.cx,this.cy,this.a,this.b);

            //画球
            ctx.beginPath();
            // ctx.globalCompositeOperation = "lighter";
            ctx.globalCompositeOperation = "source-atop";
            ctx.shadowColor=this.color;
            ctx.shadowBlur=1;
            ctx.fillStyle=this.color;
            ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false);
            ctx.fill();
            //画尾迹
            ctx.restore();
        }
    }

    function createComets(){
        var l=180,
            a=800,b=300,
            cx=a-l,cy=0,
            r=3,duration=30,angle=0,color='#fff',
            comet = null;
        for(var i=0;i<20;i++){
            l=Random(120,350)
            a=Random(600,1000);
            b=a/Random(1,3);
            cx=a-l;
            r=Random(2,4);
            angle=Random(0,Math.PI*2*1000)/1000;
            color=getCometColor();
            duration=Random(20,100);
            stage.planets.push(new Comet(cx,cy,a,b,r,angle,color,duration));
        }
    }

        以前看网络直达段:我毕竟想将来出雷同天我结婚了,如果新郎不是他
,那他迟早要来当自己的伴郎。因为毕竟我们吧齐踏上上了红毯 。后来啊
!我以想他来与自己之婚礼吧 !来砸自己的场所吧! 来不久我吧 !我决然和他举手投足。
最后自己眷恋他要别来我之婚礼了, 因为自己害怕在婚礼及见他
,可他什么还无举行,我可惦记以及他走。这一阵子,我猛然明白,说散就解除很不便。

挪轨迹

  最后的细节,就是标识出行星圆周运动的则,当然最好简便的凡遵循动半径画个健全。但咱为此线性渐变添加好看的尾迹,这样效果更好

    function drawCircle(r,color){
        var hsl=Color.hexToHsl(color);
        ctx.lineWidth=1;
        // ctx.strokeStyle='rgba(176,184,203,0.3)';
        // ctx.arc(0,0,this.x,Math.PI*2,false);
        // ctx.stroke();
        var gradient=ctx.createLinearGradient(-r,0,r,0);
        gradient.addColorStop(0,'hsla('+hsl[0]+','+hsl[1]+'%,0%,.3)');
        gradient.addColorStop(0.6,'hsla('+hsl[0]+','+hsl[1]+'%,50%,.9)');
        gradient.addColorStop(1,'hsla('+hsl[0]+','+hsl[1]+'%,80%,1)');
        ctx.strokeStyle=gradient;
            // ctx.shadowColor=color;
            // ctx.shadowBlur=4;    
        ctx.beginPath();
        ctx.arc(0,0,r,0,Math.PI,true);
        ctx.stroke();
    }

       
电影里的道理,就恐怖我们且知情,却做不交。余飞及丁点分手后,组织各种还东西局,分手局,一糟糕同糟糕的关系而一头好了,因为在这些店铺被,回忆将她们相互之间拉扯掉现实,发现对方还是爱在他。而孟云和林佳于含蓄蓄,两单人口还于抵,直到王梓的产出,孟云感觉到威胁,发现孟云都休属于它了。

最后

  所有的片还早已形成,我们才待启动场景类即可

    createAsteroids();
    createComets();
    stage.init(ctx);

     
最后互相各自来了千篇一律摆正式的离别,说散就打消,孟云站于十字街头扮着到尊宝说一万次于林佳,我容易你。这是外一度对林佳的许诺,而林佳冒着生命的危,吃生整箱过敏芒果,最后大家都疼过了。
在歌曲的反衬下,感人至极,很多感同身受的人数便这么自己代入,在影院哭的撕心裂肺。

     
当所有还醒了后头,就这样散了。分手要狠,说散就打消,不要浪费时间。如果分别还藕断丝连,那就同样在预先低头在齐吧。

相关文章