分类 随笔 下的文章

日常脑洞-文字双色切割(什么鬼

脑洞地址:Q,Q

日常开脑洞。写的时候关于用什么position做了好长时间实验,感觉应该写个专门的框架做可视化实验了2333。

(没错我只是单纯的想膜拜一下张鑫旭大牛的css实验大法

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的时候还是卡壳了,果然写的逻辑还是有问题。

英文字母、数字的5*5点状化坐标

闲的没事干,想起了之前想过的一个canvas效果,其中有一步是把每个数字以点状的形式组成。教程中提供了一个包含0-9数字的js文件,文件中是一个以0和1表示数字形象的二维数组。

通过这个思路,想到也可以直接把每个字母以二维数组的形式储存它的图形。

于是有了这个:5x5wordList.js

数组名:WORDLIST

数组现有内容:

  1. 英文大写字母A-Z
  2. 数字0-9

有空再增加其他内容,用这个简化canvas获取字符图形的一些步骤。

获取中文字符的逻辑之前没做好,生成的数组过大导致计算效率低下,这个问题正在解决中。