html5运动,html5移动

如何用Html5中的canvas模拟三维小球运动动画

下面详细解释都在源码中:

专注于为中小企业提供成都网站设计、成都网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业拱墅免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千多家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

!doctype htmlhtmlheadmeta charset="utf-8"title无标题文档/titlestyle#canvas{ background:#eee;}/style/headbodycanvas id='canvas' width="500" height='500'/canvasscriptwindow.onload=function(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); //平移,主要是将坐标轴平移到中间,为了画圆定位方便 context.translate(250,250); //定义焦距 var fos = 300; //存放小球的数组 var arr = []; for(var i = 0 ; i 8 ; i++){ var arcObj = { //半径,用随机数目的是让每个小球大小不一 r:10+5*Math.random(), //起始X坐标 x:-200+i*30, //起始Y坐标 y:-100+200*Math.random(), //起始Z坐标,这里需要理解,我们要构造的是一个三维立体小球的运动 //则X,Y轴不能表达空间感,你需要充分的想象Z坐标轴是顺着你的眼睛的就是Z轴 z:i*10, //小球的运行速度 speed:20 } arr.push(arcObj); } setInterval(function(){ //清除画布,每次画之前先将上次的清除掉.然后绘出本次的,就可以形成动画效果. context.clearRect(-250,-250,500,500); //将arr排序,sort()的参数则是作为一种比较规则 var newArr = arr.sort(function (a,b){ return a.z b.z }); //循环绘出刚才定义的几个小球 for(var i = 0 ; i newArr.length ; i++){ //z轴的变化,每次变化都是 速度*时间+z = z;由于speed未定义单位,则时间可忽略 arr[i].z += arr[i].speed; //让小球来回弹跳 if(arr[i].z 600 || arr[i].z -50){ arr[i].speed *= -1; } //这里的缩放比例,一定要注意,你要想象你眼前有个球垂直从远处飞来,逐渐变大的过程,Z轴不断增加.焦距就想象成从最初你到球的距离,通过运动后,现在到球的距离和焦距就可以形成缩放比例. var scales = fos/(fos+arr[i].z); var x1 = arr[i].x*scales; var y1 = arr[i].y*scales; //保存之前的context绘图环境,即后续可以用context.restore方法可以恢复, //目的是让下面的context变化不影响其他的画图样式. context.save(); //平移X,Y 也可以不用平移X,Y只要在下面的画圆中定义相应的X,Y也能达到相同的目的 context.translate(x1,y1); //将坐标轴缩放,目的是让小球的大小发生视觉上的变化. context.scale(scales,scales); context.beginPath(); //定义放射性颜色渐变 var colorObj = context.createRadialGradient(0,0,0,0,0,arr[i].r); colorObj.addColorStop(0,'#cbc0f3'); colorObj.addColorStop(1,'#06198b'); context.fillStyle=colorObj; context.arc(0,0,arr[i].r,0,Math.PI*2); context.fill(); context.restore(); } },50);}/script/body/html

主要要理解焦距的概念,实际开发过程中,可能X轴,Y轴都有小球的运动速度分量,那才能在运动的过程中转弯,撞墙等特效.

HTML5简介以及发展历程

简介

万维网 的核心语言、 标准通用标记语言 下的一个应用 超文本标记语言 （ HTML ）的第五次重大修改（这是一项推荐标准、外语原文： W3C Recommendation、见本处 参考资料 原文内容：[1]

）。

2014年10月29日， 万维网联盟 宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。

发展历程

标准通用标记语言 下的一个应用 HTML 标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web 超文本 应用技术工作组 - WHATWG ） 的组织。WHATWG 致力于 Web 表单和应用程序，而 W3C （World Wide Web Consortium， 万维网 联盟） 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。

HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分 现代浏览器 已经具备了某些 HTML5 支持。

2012年12月17日， 万维网联盟 （W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”

2013年5月6日， HTML 5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订 万维网 的核心语言：超文本标记语言（ HTML ）。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。

本次草案的发布，从2012年12月27日至今，进行了多达近百项的修改，包括HTML和XHTML的标签，相关的 API 、 Canvas 等，同时HTML5的图像img标签及svg也进行了改进，性能得到进一步提升。

支持Html5的浏览器包括 Firefox （火狐浏览器）， IE9 及其更高版本， Chrome （谷歌浏览器）， Safari ，Opera等；国内的傲游浏览器（Maxthon），以及基于IE或 Chromium （Chrome的工程版或称实验版）所推出的 360浏览器 、 搜狗浏览器 、 QQ浏览器 、 猎豹浏览器 等国产浏览器同样具备支持HTML5的能力。

在移动设备开发HTML5应用只有两种方法，要不就是全使用HTML5的语法，要不就是仅使用JavaScript引擎。

JavaScript 引擎的构建方法让制作手机网页游戏成为可能。由于界面层很复杂，已预订了一个 UI 工具包去使用。

纯HTML5手机应用运行缓慢并错漏百出，但优化后的效果会好转。尽管不是很多人愿意去做这样的优化，但依然可以去尝试。

HTML5手机应用的最大优势就是可以在网页上直接 调试 和修改。原先应用的开发人员可能需要花费非常大的力气才能达到HTML5的效果，不断地重复编码、调试和运行，这是首先得解决的一个问题。因此也有许多手机杂志客户端是基于HTML5标准，开发人员可以轻松调试修改。

2014年10月29日，万维网联盟泪流满面地宣布，经过几乎8年的艰辛努力，HTML5标准规范终于最终制定完成了，并已公开发布。

在此之前的几年时间里，已经有很多开发者陆续使用了HTML5的部分技术， Firefox 、 Google Chrome 、Opera、Safari 4+、Internet Explorer 9+都已支持HTML5，但直到今天，我们才看到“正式版”。

HTML5将会取代1999年制定的HTML 4.01、XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容。

W3C CEO Jeff Jaffe博士表示：“HTML5将推动Web进入新的时代。不久以前，Web还只是上网看一些基础文档，而如今，Web是一个极大丰富的平台。我们已经进入一个稳定阶段，每个人都可以按照标准行事，并且可用于所有浏览器。如果我们不能携起手来，就不会有统一的Web。”

HTML5还有望成为梦想中的“开放Web平台”(Open Web Platform)的基石，如能实现可进一步推动更深入的跨平台Web应用。

接下来，W3C将致力于开发用于实时通信、 电子支付 、应用开发等方面的标准规范，还会创建一系列的隐私、安全防护措施。

W3C还曾在2012年透露说，计划在2016年底前发布HTML 5.1。

什么是 HTML5?

TML5是什么？

HTML5是指第5代HTML（超文本标记语言），也指用HTML5语言制作的一切数字产品。

网上的网页，多数都是由HTML写成的。

“超文本”是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

而“标记”指的是这些超文本必须由包含属性的开头与结尾标志来标记。

浏览器通过解码HTML，就可以把网页内容显示出来。

下图中就很清晰的指出了H5的涵盖范围：

HTML5之所以能引发如此广泛的效应，根本在于它不再只是一种标记语言，它为下一代互联网提供了全新的框架和平台，包括提供免插件的音视频、图像动画、本体存储以及更多酷炫而且重要的功能，并使这些应用标准化和开放化，从而使互联网也能够轻松实现类似桌面的应用体验。