No.1 绘图功能(Canvas、SVG)

由 卓别林 创建, 最后一次修改 2016-03-03

这是H5一个非常重要的特性,你在很多H5中看到的动画效果就是用H5的绘图功能做的,比较典型的例子是STC风云榜分享的可口可乐的例子,有兴趣可以点击最后的“阅读原文”看一下。


为了方便理解,你可以将H5的绘图功能类比为Flash,但是唯一的决定性区别是,Flash做出来的动画无法在移动端的浏览器中浏览,因为Adobe早已在2012年就停止了对移动端flash的开发。毫无疑问,未来的移动网页游戏和动画会是H5的天下。


从技术实现的角度,H5配合JS(一种程序语言)可以做出任何二维动画,并且因为是网页元素,所有元素均可以监测到用户点击的数据,也就是说你可以知道用户在H5动画网页中的所有交互行为。但是,具体到实际应用,我们就要考虑周期、成本,和用户体验的问题,复杂的动画相应的制作周期和成本会提高,同时也有可能影响加载速度等用户体验相关的问题。


以下这个网站是H5绘图功能的典型例子,非常强大。你可以选择不同型号的毛笔、笔触半径以及墨水的颜色,整个绘图过程非常顺畅,而且还有一个模拟手握毛笔的人性化设计。

以上内容是否对您有帮助:

二维码
建议反馈
二维码