HTML5的视觉方案及其技术简介(下)
勾三股四
·
2011-07-17
·
via 囧克斯
本文摘自 勾三股四 更早时期的 不老歌 博客。
CSS 3
前端开发的最爱！
技术介绍和代码实现
CSS 3 的特点
优点
- 符合传统Web前端工程师的习惯
- 尊重主流的网页设计风格和技术需求
- 有强大的交互机制
- 和网页元素完美结合，不影响语义
- 适合较为系统或简约的界面需求
缺陷和其它不确定因素
- 归根结底都是矩形变换
- 没有处理复杂光影效果的能力
- 部分效果需要取巧的方式来实现
- 运行效能尚不成熟
- 兼容问题阴魂不散
实例演示
延伸阅读
SVG
期待重生！
技术介绍和代码实现
其它细节
SVG的特点
优点
- 基于矢量图和矢量变换
- 适用于相对静态的视觉内容
- 各种集成管理方式
- 全平台解决方案 (vml for IE)
- 处理不规则形状的元素
- 兼顾灵活度和前端开发的习惯
缺陷和其它不确定因素
- 标记和属性都非常琐碎，不易于学习和记忆
- 必须严格遵循 xml 文件格式，代码健壮性不够
- 无法进行像素级编辑
- 同样存在不同平台和浏览器的细节绘制差异
实例演示
延伸阅读
总结
| | Canvas | CSS 3 | SVG |
|---|
| 优势 | 灵活、跨平台、像素级处理 | 事件交互性强、小巧方便、学习成本最低 | 兼顾灵活性和前端开发习惯、学习难度低 |
| 劣势 | 事件判定、平台的视觉体系无法利用、全部都是编程 | 效果有限 | 比较陌生，平台差异、代码健壮性 |
| 适用产品 | 大型或复杂的界面 | 文档类、功能型界面 | 规模不大，但对设计要求较高的界面 |
| 适用人群 | 游戏开发者 | 前端设计师、前端开发者 | 矢量图设计师、艺术家 |
横向实例对比：头像编辑
引用说明
迎接挑战吧!
Thanks & Q-n-A
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。
