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 ...
一周排行
  • 登陆创业板的企业,素来以高风险高收益著称.在创业板的一季报中,有很多企业的业绩令人大跌眼镜,与其刚上市时大相径庭.而在刚刚披露的半年报中,很多创业板企业咸鱼翻身,业绩大幅增长,好似过山车一般,这也令投资者初步体会到了 ...
  • 首先想说明一下,这是一个很简单入门的教程,主要是希望能够通过简单的一步步操作,让更多希望接受和学习虚拟化的朋友能够知道操作,当然你如果需要知道更多理论或原理上的东西,可以查看官方文件,如果哪位需要最新的官方文档.最新 ...
  • 刚接触C++的时候总感觉内存泄露是很可怕的事,觉得手足无措,直到有一天发现心里的巨石居然是那么小的一个case. 方法一:利用CRT调试堆函数 举例说明: #ifdef _DEBUG #define CRTDBG_M ...
  • 003: The prime factors of 13195 are 5, 7, 13 and 29. What is the largest prime factor of the number 60085147 ...
  • 一.题目简介     编写一个简单的记事本程序,能够实现新建.打开.保存.退出.编辑时间和日期.格式.帮助.关于功能以及格式下的自动变行和显示记事本编辑信息. 二.代码链接 https://github.com/li ...
  • Office 2010 RTM-Escrow中文版下载 更多信息见:http://user.qzone.qq.com/732397741/blog/183527347 OFFICE 2010 中文包 32位 迅雷下载 ...
  • ownCloud是一个基于Linux的开源云项目,允许用户以浏览器或WebDAV方式访问云服务器,进行各项管理工作.ownCloud支持多种设备 访问,用户可以很方便地使个人设备与服务器上存储的文件.日程安排.通讯录 ...
  • 谷歌地图指路Google+信息流发送和接收谷歌纬度位置签到查询天气实时导航拍照和摄像综合新华社报道美国谷歌公司4日宣布启动"眼镜计划",开始公开测试配备增强现实技术的眼镜,这款眼镜将集智能手机.G ...
  • oracle学习笔记2014.09.05 测试数据库配置的信息 全局数据库名:xiuhao 系统标识符(SID):xiuhao 服务器参数文件名:c:\oracle\dbs\spfilexiuhao.ora data ...
  • 一.中介者模式简介(Brief Introduction) 中介者模式(Mediator Pattern),定义一个中介对象来封装系列对象之间的交互.中介者使各个对象不需要显示地相互引用,从而使其耦合性松散,而且可以 ...