canvas七夕粒子特效

效果:(咩哈哈哈哈)点击屏幕即可开始显示动画,点一下一句话。

睡不着,于是爬起来总结一下。

首先我用的依旧是createjs。这个框架我用的不是很娴熟,没怎么翻过手册,只用了easelJs和tweenJs的极少部分函数。

前边的一些点动画,构建起来很麻烦,所以我加上了计数器,包括段落计数、字数计数、高度计数。这个时候深深的感受到了函数式编程思想。如,把单个字形成的函数包裹起来,返回它形成之后的左侧边位置以便于下一个字的位置计算——然后再用更大的函数包裹形成字的函数,让每句单独形成。

同时为了在手机端看,这个canvas我设置了自动高度,宽度1000码而填充100vw。vw/vh这两个单位在实际使用中并不是特别好用,它对应的是屏幕的尺寸,也就是innerWidth/innerHeight这两个属性的百分比,通常做一屏幕大小为一页的设计的时候,这个单位可以在很大程度上减少百分比的使用,也方便嵌套与计算。(说起这两个单位,还是Rakume菊苣告诉我的2333)

这个canvas有以下几个弊端是我犯了懒得改的:

  1. 直接加载createjs完整库,大小将近两百kb,对于加载是个不小的坑;
  2. 点位没有用数组控制,每次clear屏幕都要检索全局,效率不高;
  3. 在手机qq内嵌浏览器中,因为我用了自动高度,所以它会按照浏览器内高来调整canvas高,可是伐开森的是,浏览器因为上下俩功能条,导致屏幕可下滑,为了达到最好的效果需要只单机屏幕上半部分。

想拿去用的话,修改js文件的那个数组就好,注意当前只支持大写字母。
——————分割——————

今天研究了一下后端……写了一晚上登陆模块感觉自己真是2透了。。。因为是为了写nodejs的博客系统,单人登陆,所以var一个对象就能搞定数据,然而在set cookie的时候还是卡壳了,果然写的逻辑还是有问题。

标签: none

已有 2 条评论

  1. yu yu

    咦,点击咩哈哈哈哈后,黑色的屏幕,没有动画啊。。。。

    1. nocti nocti

      需要继续点击屏幕才能看见秀恩爱的内容=,= 那是我给我徒弟写的东西

添加新评论