TAT.Cson Canvas 绘制列表的尝试
In 未分类 on 2015年10月30日 by view: 6,118
6

为什么尝试使用 Canvas 绘制列表?使用 canvas 绘制列表的好处在于页面只有一个 dom 元素,这样对于大量 dom 元素组成的列表来说,无疑更节省页面内存。

本文将一步一步分析,如何实现一个 canvas 绘制的长列表。

 

Step1:dom 节点映射

首先考虑一个问题,对于我们在页面中常见的 dom 结点,在 Canvas 中如何表示?

因此我们的第一步工作就是实现 dom 结点到 Canvas 绘制对象的映射

TAT.Cson AEditor 快速上手教程
In 未分类 on 2015年07月12日 by view: 6,719
12

本教程演示如何使用 AEditor 制作一个简单的 H5 交互页 demo:

37

 

交互页 demo 地址:

点击打开 H5 交互页 demo

 

AEditor 访问地址:

http://aeditor.alloyteam.com

TAT.Cson H5 交互页编辑器 AEditor 介绍
In 未分类 on 2015年06月30日 by view: 22,729
29

AEditor 是什么?

AEditor 是一个方便广大 web 开发者进行 H5 动画交互页开发的工具,开发者可以在 AEditor 上对交互动画以进行编辑,最终导出页面项目。与面向大众的 H5 交互页编辑平台(如玉兔,易企秀等)不同的是,AEditor 面向开发者,在提供预设动画模式的同时,支持对动画进行帧的编辑,事件通知模型,以及可二次开发的特性,从而让开发者能更灵活地实现各种自定义的动画交互需求。

 

访问地址:http://aeditor.alloyteam.com/

浏览器支持:只支持 chrome 浏览器

 

快速上手教程:http://www.alloyteam.com/2015/07/aeditor-kuai-su-shang-shou-jiao-cheng/

 

概览

AEditor 主要由五部分组成,分别是:基础操作栏、时间轴管理栏、元素属性编辑栏、精灵管理栏以及预览区域。

TAT.Cson H5 页面的跨 webview 预拉取数据尝试
In 未分类 on 2015年06月01日 by view: 4,092
14

对于传统的页面模型来说,数据的拉取+渲染模型如下:

1

在页面的 head 部分,使用 jsonp 预拉取 cgi 资源,然后在资源加载完成之后,检查预拉取的数据是否已经返回,如果已返回,则直接用该数据渲染(避免了先用缓存数据渲染再用 cgi 数据渲染导致的二次刷新),否则才用缓存数据渲染。

TAT.Cson 关于 node.js 的进程管理
In 未分类 on 2014年11月03日 by view: 15,439
4

如果是单纯的运行一个 node 进程,那会比较简单,例如:

但是一般来说,当我们运行一个 node 进程之后,我们可能希望对这个进程进行更多的管理,例如,当 node 程序是一个 server 服务时,我们就有更多的需求。

例如:

1. 服务挂掉的时候自动重启。

2. 列出所有服务,包括服务的信息。

3. 能够重启/终止某个服务。

4. 为服务的运行记录日志。

TAT.Cson browserify 运行原理分析
In 未分类 on 2014年10月21日 by view: 24,554
10

 

目前对于前端工程师而言,如果只针对浏览器编写代码,那么很简单,只需要在页面的 script 脚本中引入所用 js 就可以了。

但是某些情况下,我们可能需要在服务端也跑一套类似的逻辑代码,考虑如下这些情景(以 node 作为后端为例):

1.spa 的应用,需要同时支持服务端直出页面以及客户端 pjax 拉取数据渲染,客户端和服务器公用一套渲染模板并执行大部分类似的逻辑。

2. 一个通过 websocket 对战的游戏,客户端和服务端可能需要进行类似的逻辑计算,两套代码分别用于对用户客户端的展示以及服务端实际数值的计算。

这些情况下,很可能希望我们客户端代码的逻辑能够同时无缝运行在服务端。

TAT.Cson 更快的异步执行
In 未分类 on 2014年03月03日 by view: 41,136
20

如果要异步执行一个函数,我们最先想到的方法肯定会是 setTimeout
例如:setTimeout(function( /* 1s 后做点什么 */){},1000}

那如果说要最快速地异步执行一个函数呢?
是否会是:

可惜的是,浏览器为了避免 setTimeout 嵌套可能出现卡死 ui 线程的情况,为 setTimeout 设置了最小的执行时间间隔,不同浏览器的最小执行时间间隔都不一样。chrome 下测试 setTimeout 0 的实际执行时间间隔大概在 12ms 左右。

TAT.Cson CSS 的障眼法:利用 border 实现图片的翻转
In 未分类 on 2013年12月30日 by view: 13,151
8

兼容:IE7 8 9 10 chrome firefox
demo 地址

之所以说这是 CSS 的障眼法,是因为这种效果并不是使用 CSS 原生的属性进行实现的,并不仅仅是使用一张图片,然后通过特定属性使其翻转,因为我们知道 CSS 并不提供另图片翻转的接口。要实现这种效果,我们需要的是通过图片和外层 div 的 border 的配合,使图片看起来翻转了一定角度。

TAT.Cson canvas 动画优化小议
In 未分类 on 2013年12月01日 by view: 12,427
8

在使用 canvas 制作动画时,最传统的方式是对 canvas update -> clear -> draw 的过程

e1

但是对于同一个 view 里的不同的动画,需要的更新频率可能并不一样,所以对于不同类型的动画,我们可以放在不同的 canvas 层上进行渲染,使用多层 canvas 分别渲染取代单个 canvas

TAT.Cson 腾讯 AlloyTeam 体感游戏《墙来了 WallComing》介绍
In 未分类 on 2012年11月30日 by view: 29,422
16

一 .《墙来了》简介

《墙来了》是一款基于 HTML5 的体感游戏,第三届腾讯创意马拉松的一等奖作品,由 腾讯 AlloyTeam 和 HTML5 梦工场联合出品。《墙来了》 采用 HTML5、Javascript、CSS3 等全新 Web 技术来构建一个在线的体感游戏,只要有一个浏览器和一个摄像头,就可以通过身体的摆动,体验穿墙的刺激与快感。

  • 运行平台:Chrome
  • 语言支持:中英文