本文摘自 勾三股四 更早时期的 不老歌 博客。
自我介绍
- 赵锦江(勾三股四)
- Tags: mhtml5/maxthon/f2e/music/football
- QQ: 110698041
- E/M: zhaojinjiang@yahoo.com.cn
- Blog: http://bulaoge.net/?g3g4
- Weibo: http://weibo.com/mx006
主题概要
- 传统网页视觉体系介绍
- HTML5带来新的选择
- Canvas
- CSS 3
- SVG
- 技术介绍
- 优劣对比
- 实例展示
- 修炼之道
传统网页
Web Page → Web App
由于贵公司是游戏公司
所以我们从游戏开始谈起……
传统网页中的“游戏”？
传统文档中的元素
- 大标题、小标题
- 段落、列表
- 多媒体内容(插图/音频/视频)、表格
- 加粗、斜体、下划线、角标
- 特殊效果：字号、颜色、背景、跑马灯
网页的亮点元素
- 书签、链接：建立章节和文档间的联系
- 表单：最早的交互
更多的样式和版式 (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的特点
优点
- 符合传统游戏开发的习惯
- 执行效率高
- 效果绝对统一
- 可以进行像素级别的雕琢
- 开发级别非常底层，发挥空间很大
缺陷和其它不确定因素
- 事件判定的工作比较复杂，需要计算坐标
- 实现动画的工作比较繁琐，需要深入到每一帧
- 无法利用任何平台特性(表单控件、系统主题)
- 是一块真正的“布”
自己动手丰衣足食
实例演示
延伸阅读
- WebGL
- MDC Canvas
- Canvas手册
- Canvas实践机会不多，就简单介绍到这里吧，不敢再班门弄斧了……