HTML 5 实现小车动画效果(1)

HTML5正在变得越来越流行。在这个移动设备日益增长的时代,对来自Adobe的Flash插件的改造需求也正在快速增长。因为就在最近,Adobe宣布Flash将不再支持移动设备。这意味着,Adobe自身也认为对移动设备来讲HTML5是一项重要的技术。而桌面系统的改变也是迟早的事。

HTML5的一大劣势就是对于多媒体技术支持的缺乏。在HTML中,你无法直接显示一个视频或在屏幕上绘画。在HTML5中,随着<video>与<canvas>元素的引进。这些元素给予开发者直接使用“纯粹的”HTML来实现多媒体技术的可能性——仅需要写一些Javascript代码来配合HTML。在多媒体技术中,有一个基本的技术应该被支持——动画。在HTML5中,有不少方式能够实现该功能。

在这篇文章中,我仅将最新的<canvas>元素与即将到来的CSS3动画技术进行比较。其他的可能性包括DOM元素或SVG元素的创建和动画。这些可能性将不在本文中进行讨论。从开始就应该注意到canvas技术在当前发布的大部分主流浏览器都给予了支持,而CSS3动画仅在最新的FireFox与Chrome浏览器中才有实现的可能,下一个版本的IE也将提供对CSS3动画的支持。(所以本文中所有演示代码的效果,在Win 7系统下当前最新版的Chrome浏览器中都可实现,但在其他操作系统与其他浏览器中,并不一定能看到所有演示代码的效果)。

这里我选择了一个比较简单的动画:

HTML 5 实现小车动画效果(1)

PS:由于显卡、录制的帧间隔,以及可能你电脑处理器的原因,播放过程可能有些不太流畅或者失真!

分三种方式实现:

(1)   canvas元素结合JS

(2)   纯粹的CSS3动画(暂不被所有主流浏览器支持,比如IE)

(3)   CSS3结合Jquery实现

知道如何使用CSS3动画比知道如何使用<canvas>元素更重要:因为浏览器能够优化那些元素的性能(通常是他们的样式,比如CSS),而我们使用canvas自定义画出来的效果却不能被优化。原因又在于,浏览器使用的硬件主要取决于显卡的能力。目前,浏览器没有给予我们直接访问显卡的权力,比如,每一个绘画操作都不得不在浏览器中先调用某些函数。

更多相关文章
  • 前面介绍过<用c#开发微信 (20) 微信登录网站 - 扫描二维码登录>,本文介绍如何用支付宝扫描二维码登录网站.      1 注册企业支付宝帐号 https://enterpriseportal.alipay.com/login.htm 2 实名认证 提供公司相关证件进行实名认证,提 ...
  • VPN任务栏里没有显示解决   问题连接VPN  勾选属性里面的在桌面上显示图标,结果没有显示. 1.处理方法重新设置VPN 连接(记住你以前的用户名和密码) 2.重设VPN的图解 2.1   2.2 2.3 2.4 2.5 2.6 2.7  
  • 网线制作方法(RJ45水晶头接法)   一般有如下几种情况:   1)对等网(两台计算机的网卡直接互连):采用交叉线接法,网线两端接法不同.   2)网卡与交换机(或HUB):采用直通线接法,网线两端接法相同.   3)交换机与交换机(或HUB)级联:采用交叉线接法,网线两端接法不同.    双绞线 ...
  • 8月6日消息,据部分用户向TechWeb爆料,自今日晚间7点42分开始,腾讯手机QQ出现登录不上的情况.另有网友透露腾讯手机QQ遭到黑客攻击导致登录异常.此外,有媒体报道,腾讯旗下的有些游戏登录也会失败. 对此腾讯手机QQ在其微博上表示:有部分用户在登录QQ时遇到提示冻结或失败,我们已经关注.目前正 ...
  • 关于DDD的理论知识总结,可参考这篇文章. DDD社区官网上一篇关于聚合设计的几个原则的简单讨论: 文章地址:http://dddcommunity.org/library/vernon_2011/,该地址中包含了一篇关于介绍如何有效的设计聚合的一些原则,共3个pdf文件.该文章中指出了以下几个聚合 ...
  • Test-Driven Development PrinciplesTDD consists of writing test cases that cover a desired feature, then writing the feature itself. In other words, th ...
一周排行
  • Adobe Flash 更新到11.3之后,为火狐引入Flash沙盒安全模式,但同时,又造成了部分兼容性问题,导致 Windows vista及 Windows 7上部分火狐崩溃,并致使一些使用Flash的网站,例如 ...
  • 导入包含Domino命名空间的dll:Interop.Domino.dll.   安装notes客户端.     访问domino是由建立一个NotesSession对象开始的.所以第一个问题是NotesSessio ...
  • 这题和 COT1 一定有 JQ 喵~   线段树的启发式合并,每次要连接两个点时就对比较小的那棵树暴力 DFS 一边 然后均摊时间依旧是 logn 的,均摊真是世界上最邪恶的东西了……   然后这题的数据是要卖萌么? ...
  • 1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Text; 5 using System ...
  • gdcmconv: gdcm 2.2.4 $Date$ Usage: gdcmconv [OPTION] input.dcm   output.dcm Convert a DICOM file into anothe ...
  • 第01步:配置web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version="2. ...
  • mysql主从数据库配置
  • 大二上学期快过去一半了,感觉自己过的还是比较充实的,在此记录下这段时间的学习点滴.(本人软件工程专业) 平时除了上课之外,就是在工作室折腾着学院网站的客户端(ios),学习了ios有一段时间了(从今年4月份到现在), ...
  • 伤感的QQ签名下辈子做你的心脏,让我们一生一世在一起,永不分离,谁也不能拆开我们,谁也不能让我们抛弃另一方! 1.我想看淡一点,再淡一点,直到看不见为止. 2.就算是姐不要了的垃圾男,也不喜欢被别人捡去. 3.心累到 ...
  • 今天可以写第一篇博客,2011年11月09日3.