HTML5的视觉方案及其技术简介(上)

本文摘自 勾三股四 更早时期的 不老歌 博客。

在此贴上本人受邀在 Happy Elements 的工程师年会的主题分享
在线PPT：http://jinjiang.github.com/slides/new-generated-html5-ui/
PPT源码：https://github.com/Jinjiang/slides/tree/gh-pages/new-generated-html5-ui

自我介绍

主题概要

  • 传统网页视觉体系介绍
  • HTML5带来新的选择
    • Canvas
    • CSS 3
    • SVG
  • 技术介绍
  • 优劣对比
  • 实例展示
  • 修炼之道

传统网页

Web Page → Web App

由于贵公司是游戏公司

所以我们从游戏开始谈起……

传统网页中的“游戏”？

  • 文字游戏 (link)
  • 升级版的文字游戏：“字符游戏”
    • 符号版的“俄罗斯方块” (link)
  • 接下来我们看看传统网页是什么样子的，如何衍进的？

传统文档中的元素

  • 大标题、小标题
  • 段落、列表
  • 多媒体内容(插图/音频/视频)、表格
  • 加粗、斜体、下划线、角标
  • 特殊效果：字号、颜色、背景、跑马灯

网页的亮点元素

  • 书签、链接：建立章节和文档间的联系
  • 表单：最早的交互

更多的样式和版式 (CSS)

  • 样式
    • 边框、边距
    • 特殊文字效果
    • 主题、皮肤的概念陆续出现
  • 版式
    • 文档流布局(横向布局)
    • 浮动布局(纵向布局)
    • 叠层布局(自由布局)
    • 模板的概念陆续出现
  • 网页不再只是“在线版Word文档”了

配套的交互开发 (JavaScript)

  • 管理窗口状态(window/location/screen/history)
  • 管理文档内容(dom)
  • 管理界面样式(style)
  • 管理界面交互(events)
    • 设备：鼠标、键盘
  • 管理表单控件(form)
  • 管理用户数据(cookie)

更多的控制器 (Ajax)

  • 链接逐渐变为按钮
  • 表单提交逐渐变为Ajax Request
  • 站点逐渐变为一个或几个页面

各类插件飘过……

  • Flash、Java、类似的还有Silverlight
  • 音频视频解码、数据加密、本地存储、高级网络通信、高级图像处理等
  • 视频播放、网上银行、大量网页游戏
  • 复制到剪贴板

终于……

贪婪的人类啊！

HTML5横空出世 (Web App)

  • 语义增强 (新增语义化标记/表单扩充/更多输入设备匹配/微格式)
  • 多媒体增强 (视频/音频/编码格式)
  • 通信连接增强 (多进程/Socket/消息提示器)
  • 设备支持增强 (原生拖拽/文件系统管理/地理位置信息)
  • 样式、特效增强：稍后详细介绍
  • 数据管理增强 (本地缓存/本地数据存储/本地数据库)
  • 性能功能增强 (部分属性、接口的优化和改进)

Web真正有了应用的感觉

大量应用横空出世！
Web Game 首当其冲！

以上就是一个前端开发工作者眼中的Web世界

  • 扯了半天跟游戏没有关系的东东，不知道大家是不是快睡着了……
  • 诸位游戏开发工作者是怎么看待Web的呢？

HTML5中的视觉新选择

Canvas/CSS3/SVG

CANVAS

游戏开发者的最爱！

技术介绍和代码实现

  • 实例1：简单的框线绘制 (link)
  • 实例2：使用路径：二次曲线和贝塞尔曲线 (link)
  • 实例3：画布状态管理：记录和恢复 (link)
  • 实例4：导入位图：Image 文件 / DataURI (link)
  • 实例5：动画的做法：擦了画，画了擦 (link)
其它细节
  • 图像合成规则
  • 框线边缘样式
  • 文字绘制
  • 画布变形
  • 像素级操作

Canvas的特点

优点
  • 符合传统游戏开发的习惯
  • 执行效率高
  • 效果绝对统一
  • 可以进行像素级别的雕琢
  • 开发级别非常底层，发挥空间很大
缺陷和其它不确定因素
  • 事件判定的工作比较复杂，需要计算坐标
  • 实现动画的工作比较繁琐，需要深入到每一帧
  • 无法利用任何平台特性(表单控件、系统主题)
  • 是一块真正的“布”

自己动手丰衣足食

实例演示

延伸阅读



继续查看下半部分