Windows8风格程序支持使用WPF和HTML两种方式进行编程。本人之前曾使用WPF开发过概念版QQ,现在又在使用HTML5。两种技术都略懂,略懂。所以将两者做了个比较。虽然WPF的命运多舛,应用不太广泛,但技术本身还是有很多亮点的。值得我们学习一下,开阔眼界。
TAT.Minren CSS3 的 roate 与 rotateX 的顺序研究
In CSS3,HTML5 on 2012年11月08日 by view: 11,017
2

我觉得CCS3的transform中的学问很深,可以出不少面试题了,之前的文章谈到过perspective属性的位置问题,我们今天看看rotate的顺序,首先看看下面两个CSS3的keyframe动画:

两个动画的起始状态和结束状态都是是一摸一样的(其实就是原始位置),不同的只不过是rotate和rotateX的顺序。但是动画效果却有惊人的差别。

TAT.dmyang HTML5迟来的API:Page Visibility
In HTML5,JavaScript on 2012年11月05日 by view: 15,541
8

一开始先看个小小demo切换tab对比下!

不得不说,浏览器的多tab(and多窗口)设计确实是满足了用户同时浏览很多个网页的需求,但是,网上有成千上万的页面,这些页面性能又参差不齐,对于某些性能很差的页面,用户停留在这个页面倒还好,但是当用户切换了到了其他tab页时,有可能会出现由于性能差的页面卡死导致整个浏览器卡死甚至机器卡死,其他页面好冤,浏览器好冤,机子好冤[汗]。

HTML 5以前的标准由于考虑到浏览器安全问题并不允许直接跨域通信,于是为了达到跨域通信的目的各种蛋疼的解决办法出现了,常用的有:jsonp、使用代理文件、地址栏hash等等,这些办法的出现在达到解决跨域问题的同时,也增加了前端页面的性能开销和维护成本。HTML5新的标准中,增加了” Cross-Origin Resource Sharing”特性,这个特性的出现使得跨域通信只需通过配置http协议头来即可解决。

TAT.Minren CSS3 Transform的perspective属性
In CSS3,HTML5,Web开发 on 2012年10月29日 by view: 24,299
17

以下两行语句有什么区别?

如果大家不清楚,请听我娓娓道来。

CCS3中的Transform是设置界面样式和动画的一大利器。而且在Chrome和FF中还支持3D变换。IE9不支持,IE10支持。

TAT.Minren 使用Javascript动态管理CSS
In CSS3,HTML5,JavaScript on 2012年10月23日 by view: 27,398
6

 添加CSS

通常情况CSS不论是内嵌还是外联,都是预先定义好的。其实利用JavaScript,我们也可以动态在页面中插入或删除CSS。

比较常见的场景是:CSS动画。由于我们在设计网页时不能预知动画的具体细节,所以需要在运行时进行定制。比如,我们想让一个元素从右侧飞出屏幕,如果用keyframe动画实现,我们必须知道屏幕的宽度,这个信息只有在运行才知道。
例如下面的1026px,是运行时浏览器窗口的宽度。

Application cache 是 HTML5 中在规范完整性上比较糟糕的特性之一,规范上的不到位导致浏览器厂商在实现上也存在些许差异,而产生本文档的目的即让开发者们知晓那些潜规则,摆脱问题的困惑与束缚,正确的使用离线缓存真正让 Web 加速。

【场景】:

由于CodeTank是一个JS的编程游戏,所以用户的代码都可以在CodeTank平台上执行,从而控制tank的个性化行为。

在CodeTank设计之初,主要需要实现的目标如下:

  1. 自定义的坦克可以调用公用的API,例如fire,ahead等控制坦克行为的API。
  2. 自定义的坦克可以实现自己的事件处理程序,在特定事件触发时提供自己的响应。
  3. 自定义坦克管理属于自己的状态队列。
TAT.岑安 context2D上的texture mapping
In HTML5,Web开发 on 2012年08月22日 by view: 14,584
4

我们在做一些图像变换或者3D建模时,骨架或者网格的“蒙皮”是少不了的。

在webGL中,也就是“experimental-webgl”的context中,webGL跟openGL一样,提供了一个非常方便的

接口,可以很容易的对某一个指定的面或者网格蒙上指定的素材。并且,被蒙皮的区域做矢量变换,3d rotate之类的,texture会自动随着变换。不用额外的做处理。所以在webGL中,textureMapping是十分容易和方便的。

这里有个简单的demo,支持webGL的浏览器可以尝试围观下。

当然,从文章的标题可以看出,我们今天要讨论的内容并不是webGL下的bindTexture。而是在2D的context下怎么对素材进行TextureMapping?

TAT.岑安 Animations in Canvas
In HTML5,HTML5游戏 on 2012年08月21日 by view: 11,531
4

关于Canvas中动画的处理和实现

大致会有三种类型:

  • 矢量动画【No Textures】
  • 关键帧动画
  • 骨骼动画