Nocti 发布的文章

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

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

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

于是有了这个:5x5wordList.js

数组名:WORDLIST

数组现有内容:

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

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

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

关于:用Javascript让HTML有更好的可读性

凌大人给了我一张设计图撸着玩……于是有了这个 很难达到凌大人设计稿要求的页面

(没做跨浏览器优化 也没做低版本兼容 还没做滚动事件 再次偷懒)

在做的过程中逐渐习惯了jade+sass的单页开发,也渐渐适应了带变量的css写法。暂时没上手compass所以部分css3兼容的地方没写,下一步可能会自己开发点基础的sass工具函数(比如现成的满屏幕fixed、absolute全局居中、rotate兼容写法等)。本来打算用coffee写控件的然而因为看着没有括号很不爽就用了原生js一顿狂撸。

页面右下角是一个

.day-list

的class包裹的导航,每个导航都可以看见里面有各种各样的类,如

.day-list-selected / .day-list-none

等等。

然而你造嘛它们一开始是这样的:

 

 

2345截图20150730140644

写成这样,然后根据

.days

的多少来自动添加类、修改样式和添加功能。

事实上,这部分span标签也可以在js里生成……(懒得改了懒得改了

2345截图20150730140701

以及这里(截图少截了一块。。),.item 父级都是 .days ,在js里面为.days增加id,使得修改.days里面的文字内容、days的顺序等过程变得很方便。

提高HTML可读性,在修改内容上有极大的便利,之前趟过不少浑水,为了修改一点点HTML内容翻来覆去地找,修改的时候还得注意需要哪些名字复杂的class或者id。适度使用js使用框架简化HTML代码,尽管在书写的时候很费神,但是在修改和维护中会带来很大很大的效率提升。

前两天写页面的时候被李狗蛋洗脑了所以这个页面的内容里最终都是李狗蛋了……

 

仿动态磁贴(再次是傻逼方式

首先贴上示例页面链接:点我我会害羞

身为一个懒比我果然没做跨浏览器优化。反正猎豹/Chrome/FireFox新版测试都能跑……(捂脸

灵感来自猎豹的动态磁贴首页。背景是扒的猎豹浏览器内置默认背景,图片来自App Store应用iDays截取。

一开始我以为动态磁贴是很牛逼的css搞起的,,,直到后来我看见猎豹首页磁贴的style里面写着:

top: ??px; left: ??px;

于是我明白了金山的工程师们用得是我之前学瀑布流的那种方式……( 极客学院,iwen讲的 )

最终选择了半css半js的写法。如页面所示。

在1030px的分界处改变了磁贴的大小。

同时,在浏览器尺寸发生变化的时候,会取到磁贴父标签的宽度来修改left值使其居中。

(相信有闲心F12的已经发现了,我懒得给磁贴起名,所以统一叫李狗蛋了,父标签叫李狗蛋们。(lgd/lgds(QAQ

因为打开方式不对所以js写得挺冗余的。。不过不知道有什么更简单的做法。再撞到类似适应性居中的时候学习一下别人的css写法吧。

做一发canvas粒子光点

第一次不扯淡写点东西……同时这天是徒弟生日,徒弟生快!

上效果=>  生日快乐>w<

首先我用的canvas框架是create.js,认识这货是在极客学院,表示英语不好看手册基本无力了。

如效果,粒子效果看起来是松散的 ,实际上却很平均,这个我是用网格划分的。直接上代码(算法比较渣轻喷):

var stage,canvas,shape,csize,grip;//定义几个全局变量
window.onload = function(){
grip = {x:16,y:7,w:0,h:0};//初始化网格,设置网格数量
csize = {width:0,height:0};//初始化窗口大小

//获取canvas标签并在标签上建立舞台,设置FPS
canvas = document.getElementById("c");
stage = new createjs.Stage(canvas);
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick",ticker);
stage.addEventListener("stagemousedown",stageClick);
resize();
makeByRandom();//首次生成
window.onresize = function(){resize()};
};
//在每一帧循环的事件里面轮询一下以便实现效果
function ticker(e){
check();
sMove();
stage.update(e);
}
//检测光斑是否消失->如果消失则在相应网格重建光斑
function check(){
var n = stage.getNumChildren();
for(i=0;i<n;i++){
var s = stage.getChildAt(i);
if(s.alpha <= 0){
var gripX = s.gripX;
var gripY = s.gripY;
stage.removeChildAt(i);
sMake(gripX,gripY,(Math.random()-0.5)*5+5);
break;
}
}
}
//随机生成(事实上是随便起的名字我真心不会起函数名啊啊啊啊
function makeByRandom(){
for(var x=1;x<=grip.x+1;x++){
for(var y=1;y<grip.y+1;y++){
sMake(x,y,(Math.random()-0.5)*5+5);
}
}
}
//单个光斑的生成函数,需要获取网格位置
function sMake(gripX,gripY,r){
//根据提供的半径画个圆
var s = new createjs.Shape();
s.graphics.beginFill("#ffffff").drawCircle(0,0,r);
//获取到网格的位置
s.gripX = gripX;
s.gripY = gripY;
s.alpha = 0;
//在网格的随机位置生成一个0不透明度的圆形,定义它的终点和中心点
s.x = grip.w*(gripX-0.5)+(Math.random()-0.5)*grip.w;
s.x2 = grip.w*(gripX-0.5)+(Math.random()-0.5)*grip.w;
s.xc = (s.x+ s.x2)/2;
s.y = grip.h*(gripY-0.5)+(Math.random()-0.5)*grip.h;
s.y2 = grip.h*(gripY-0.5)+(Math.random()-0.5)*grip.h;
s.yc = (s.y+ s.y2)/2;
s.moving = false;//初始化运动状态为否
stage.addChild(s);
}
//定义运动函数 这里用到的是CreateJS里面的TweenJS
function sMove(){
var n = stage.getNumChildren();
for(i=0;i<n;i++){
var s = stage.getChildAt(i);
if(!s.moving){
var time = Math.random()*11000+500;//随机生成一个动画时间
createjs.Tween.get(s).to({x: s.xc,y: s.yc,alpha:1},time).to({x: s.x2,y: s.y2,alpha:0},time);
s.moving = true;
}
}
}
//下面这个是在屏幕大小发生变化的时候修改网格设置
function resize(){
canvas.width = csize.width = document.body.clientWidth;
canvas.height = csize.height = document.body.clientHeight;
grip.w = csize.width/grip.x;
grip.h = csize.height/grip.y;
}

于是这个效果极其简单。

这个效果存在的问题有很多:

  1. 部分TweenJS代码因为手册没看懂(捂脸)而写的很赘余
  2. 坐标部分麻烦
  3. 尚未通过窗口大小修改生成的光斑面积,导致小窗口效果很差
  4. 可控制性差

于是下一步是想通过控制光斑动作来让光斑根据命令排列(codepen上看到的灵感因为他代码太多懒得看就没看(请叫我懒b))。

示例页面爱扒就扒反正没啥好扒的2333333