看了一下ocanvas的api，但不能验证其实用性，

花了点时间写了一个简单的鱼缸DEMO。发现框架有时控制不够灵活，原生的HTML5 canvas接口也蛮好用的。

在线DEMO：http://www.2fz1.com/demo/?pos=2

ocanvas框架官网：http://www.ocanvas.org

本DEMO素材来源于微软的一个HTML5测试用例。

鱼缸DEMO中，鱼的轨迹没有时间细想，简单的实现了一下。

Read more »

Load.js类及DEMO下载：demo

在线DEMO：http://www.2fz1.com/demo/?pos=1

默认效果图：

一、基础用法：

引入Load.js文件到页面。

1、【可选】首先设置loading icon的canvas id；如不需要显示loading icon，可以不设置

Load.setLoadIcon({
    id:"loadicon"
});

2、调用图片加载方法

Load.loadImage({
    list:[{id:"",src:""}], //资源列表，Array
    onload:function(data){
        console.log("单个资源完成："+data.src+"；其它信息："+data.msg);
    },
    oncomplete:function(data){
        console.log("加载完成，总资源数量："+data.imgLen+"；出错个数："+data.imgErrLen);
    },
    onerror:function(data){
        console.log("加载出错："+data.msg);
    },
    onprogress:function(data){
        console.log("进度："+Math.round(data.loadImgLen/data.imgLen*100)+"%；当前资源："+data.src);
    },
    showLoadIcon:true
});

二、loading icon自定义样式

Load.setLoadIcon({
    id:"loadicon",
    loadTextColor:"#ffffff",
    loadTextAlpha:1,
    loadColor:"#ffffff",
    loadAlpha:1,
    focusColor:"#ff0000"
});

效果图：

完整设置示例：

Load.setLoadIcon({
    id:"loadicon", //canvas id [必选，下面的参数都为可选]
    loadTextColor:"#ffffff", //百分比进度文字颜色
    loadTextAlpha:1, //百分比进度文字颜色透明度[0-1]
    loadColor:"#ffffff", //加载背景圆颜色
    loadAlpha:1, //加载背景圆颜色透明度[0-1]
    focusColor:"#ff0000", //焦点圆颜色
    width:60, //icon宽
    height:60, //icon高，请和宽保持一致
    circleR:4, //小圆的半径
    circleCount:10, //小圆的个数
    showLoadText:true, //是否显示百分比进度文字
    loadTextSize:16 //进度文字尺寸,px
});

Read more »

小试牛刀，周末用了一天时间，写了一个简单的”HTML5游戏入门DEMO”。

【种花女孩推花盆】创意源于推箱子，是一个flash的小游戏，大家可以先去体验一下flash版的。

游戏比较简单，不使用html5也可以实现，canvas在这个游戏里面有一个大材小用，但姑且也尝一下鲜，就当学以致用。

最大的感受是，尽管HTML5的大部份知识点掌握了，但实现开发中，才发现各种问题，还是要多实际开发。

在线演示地址：http://www.2fz1.com/demo/

源码我就不打包下载了，没有压缩，很简单，直接查看页面源代码吧。

Read more »

线宽API：

context.lineWidth[=value] //返回或设置线段的线宽，非大于0的值被忽略；默认值为1.0；

线宽是指给定路径的中心到两边的粗细。换句话说就是在路径的两边各绘制线宽的一半。因为画布的坐标并不和像素直接对应，当需要获得精确的水平或垂直线的时候要特别注意。

想要获得精确的线条，必须对线条是如何描绘出来的有所理解。见下图，用网格来代表 canvas 的坐标格，每一格对应屏幕上一个像素点。在第一个图中，填充了 (2,1) 至 (5,5) 的矩形，整个区域的边界刚好落在像素边缘上，这样就可以得到的矩形有着清晰的边缘。

如果你想要绘制一条从 (3,1) 到 (3,5)，宽度是 1.0 的线条，你会得到像第二幅图一样的结果。实际填充区域（深蓝色部分）仅仅延伸至路径两旁各一半像素。而这半个像素又会以近似的方式进行渲染，这意味着那些像素只是部分着色，结果就是以实际笔触颜色一半色调的颜色来填充整个区域（浅蓝和深蓝的部分）。

要解决这个问题，你必须对路径施以更加精确的控制。已知粗 1.0 的线条会在路径两边各延伸半像素，那么像第三幅图那样绘制从 (3.5,1) 到 (3.5,5) 的线条，其边缘正好落在像素边界，填充出来就是准确的宽为 1.0 的线条。

对于那些宽度为偶数的线条，每一边的像素数都是整数，那么你想要其路径是落在像素点之间 (如那从 (3,1) 到 (3,5)) 而不是在像素点的中间。如果不是的话，端点上同样会出现半渲染的像素点。

Read more »

box2作为一个优秀的物理引擎，目前被应用在很多游戏中游戏。什么box2d会被大众接受并得到广泛使用呢，首先给大家介绍一下box2d的优点：

市场的游戏大部分都用C++编写，而box2d的原始版本就是用C++实现的，大家只需下载CPP文件，并把它们加入自己的工程下刚可编译，在引入你创建物理模型头文件的情况下，你就可以实例化可以模拟模型运行的对象和场景了。当然box2d其他语言的用法也大同小意。现在有多种语言实现的box2d,包括C++,Java,javascript,flash,也有iphone版和Android版;在开发游戏过程中，利用此物理引擎开发会比较简单，学会了创建物理世界后，加上相应的物体就可以实现物理模仿。而box2d不仅支持的版本比较多，并且入手比较快，参考其用户手册可以很快的实现基本的物理世界。Box2d一个开源项目有很多专业牛人在维护，还有论坛帮助解答，你同时也可以加入他们的加发中。Box2D 是一个用于游戏的 2D 刚体仿真库。程序员可以在他们的游戏里使用它，它可以使物体的运动更加可信，让世界看起来更具交互性。从游戏的视角来看，物理引擎就是一个程序性动画(proceduralanimation)的系统，而不是由动画师去移动你的物体。你可以让牛顿来做导演。

1、源码及DEMO：

http://code.google.com/p/box2dweb/

2、微软官方的一个DEMO

http://ie.microsoft.com/testdrive/Graphics/CanvasPinball/Default.html

3、初级入门资料：

http://www.linuxgraphics.cn/physics/box2d_js_overview.html

http://box2d-js.sourceforge.net/（英文）

http://directguo.com/blog/index.php/2010/05/box2d_js_tutorials/

4、Box2d官方网站：http://www.box2d.org/

5、Google Demo：

http://mrdoob.com/projects/chromeexperiments/google_gravity/

http://mrdoob.com/projects/chromeexperiments/ball_pool/

Read more »

众说周知，html5的<video>标签是一个激动人心的技术革新，但同时因不能全屏而被诟病。

这一现状已经被改变，并将被越来越多的浏览器所支持。Firefox 10 的发布就开始支持全屏API，除FireFox 10外，Chrome 15与Safari 5.1或更高版本的浏览器也已经支持原生全屏API。

值得一提的差异，全屏退出，FireFox和Safari都是使用“ESC”键退出，而Chrome 15却采用“F11”退出全屏，这些微小的差别，却会给用户带来困扰，愿Chrome能改回“ESC”退出。

在2011年10月15日，W3C发布了一份全屏API草案（由Opera团队的一名成员编写），它跟Mozilla的草案有两个主要的不同点：

• 1、Mozilla/Webkit使用大写字母’S'（FullScreen），但W3C则不是（Fullscreen）；
• 2、Mozilla/Webkit使用cancelFullScreen，W3C使用exitFullscreen。

一、自定义API对象，以便兼容使用

var fullScreenApi = {
    supportsFullScreen: false, //是否支持全屏
    isFullScreen: function() { return false; }, //是否全屏状态
    requestFullScreen: function() {}, //触发全屏
    cancelFullScreen: function() {}, //取消全屏
    fullScreenEventName: '', //全屏事件名
    prefix: '' //浏览器前缀
}
var browserPrefixes = 'webkit moz o ms khtml'.split(' '); //浏览器前缀列表

Read more »

一、本地存储概况

目前支持以下方法，实现浏览器端的本地存储：

1、cookie ;

每个cookie的大小不能超过4K。

Cookie数：

• IE7跟IE8限制为50个。
• Firefox限制为50个。
• Opera限制30个
• Safari/Chrome/WebKit没有限制

每次的http请求，cookie都会包含在包头里发送给服务器，cookie在http请求中是明文传递的。

2、flash LSO ;

local shared objects (LSOs).

Flash的LSOs 就如同Web浏览器中的cookies，它们被一些开发者称为“超级cookies”，因为LSOs可以存储大量数据，且存储和读取的都是原生的ActionScript数据类型。LSOs 默认的空间大小100 KB， 用户可以通过Flash Player’s Settings Manager控制LSOs的使用空间大小，来严格限制被使用的空间。

3、userData ；

是微软为IE专门在系统中开辟的一块存储空间，所以说只支持Windows+IE的组合，实际测试在2000（IE5.5）、XP（IE6、IE7），Vista（IE7）下都是可以正常使用的。

单个文件的大小限制是128KB，一个域名下总共可以保存1024KB的文件，文件个数应该没有限制。在受限站点里这两个值分别是64KB和640KB，所以如果考虑到各种情况的话，单个文件最好能控制64KB以下。

Read more »

CasualJS Framework是根据ActionScript3.0的架构开发的一套适用于HTML5 Canvas的面向对象的开发框架。虽然Canvas提供了强大的绘图功能，但满足不了高级开发的需要。利用CasualJS的显示对象架构及渲染机制， 你可以轻松的在Canvas中操控各种位图、图形、影片剪辑等显示对象，愉快开发。

方便flash开发人员迅速上手HTML5开发。

框架特性：

• 类似AS3的显示对象列表结构封装
• 基于帧的显示对象渲染机制
• 基于帧的MovieClip动画片段实现
• 内置简单的事件模型

源码下载：http://code.google.com/p/casualjs/

由于原文档是英文的，Jason(2fz1.com)简单的译了一下中文文档。

CasualJs中文在线文档：http://www.2fz1.com/casualjs/

Read more »