如何用Html5中的canvas模擬三維小球運(yùn)動(dòng)動(dòng)畫

下面詳細(xì)解釋都在源碼中:

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)拱墅免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千多家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

!doctype htmlhtmlheadmeta charset="utf-8"title無標(biāo)題文檔/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'); //平移,主要是將坐標(biāo)軸平移到中間,為了畫圓定位方便 context.translate(250,250); //定義焦距 var fos = 300; //存放小球的數(shù)組 var arr = []; for(var i = 0 ; i 8 ; i++){ var arcObj = { //半徑,用隨機(jī)數(shù)目的是讓每個(gè)小球大小不一 r:10+5*Math.random(), //起始X坐標(biāo) x:-200+i*30, //起始Y坐標(biāo) y:-100+200*Math.random(), //起始Z坐標(biāo),這里需要理解,我們要構(gòu)造的是一個(gè)三維立體小球的運(yùn)動(dòng) //則X,Y軸不能表達(dá)空間感,你需要充分的想象Z坐標(biāo)軸是順著你的眼睛的就是Z軸 z:i*10, //小球的運(yùn)行速度 speed:20 } arr.push(arcObj); } setInterval(function(){ //清除畫布,每次畫之前先將上次的清除掉.然后繪出本次的,就可以形成動(dòng)畫效果. context.clearRect(-250,-250,500,500); //將arr排序,sort()的參數(shù)則是作為一種比較規(guī)則 var newArr = arr.sort(function (a,b){ return a.z b.z }); //循環(huán)繪出剛才定義的幾個(gè)小球 for(var i = 0 ; i newArr.length ; i++){ //z軸的變化,每次變化都是 速度*時(shí)間+z = z;由于speed未定義單位,則時(shí)間可忽略 arr[i].z += arr[i].speed; //讓小球來回彈跳 if(arr[i].z 600 || arr[i].z -50){ arr[i].speed *= -1; } //這里的縮放比例,一定要注意,你要想象你眼前有個(gè)球垂直從遠(yuǎn)處飛來,逐漸變大的過程,Z軸不斷增加.焦距就想象成從最初你到球的距離,通過運(yùn)動(dòng)后,現(xiàn)在到球的距離和焦距就可以形成縮放比例. var scales = fos/(fos+arr[i].z); var x1 = arr[i].x*scales; var y1 = arr[i].y*scales; //保存之前的context繪圖環(huán)境,即后續(xù)可以用context.restore方法可以恢復(fù), //目的是讓下面的context變化不影響其他的畫圖樣式. context.save(); //平移X,Y 也可以不用平移X,Y只要在下面的畫圓中定義相應(yīng)的X,Y也能達(dá)到相同的目的 context.translate(x1,y1); //將坐標(biāo)軸縮放,目的是讓小球的大小發(fā)生視覺上的變化. 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

主要要理解焦距的概念,實(shí)際開發(fā)過程中,可能X軸,Y軸都有小球的運(yùn)動(dòng)速度分量,那才能在運(yùn)動(dòng)的過程中轉(zhuǎn)彎,撞墻等特效.

HTML5簡介以及發(fā)展歷程

簡介

萬維網(wǎng) 的核心語言、 標(biāo)準(zhǔn)通用標(biāo)記語言 下的一個(gè)應(yīng)用 超文本標(biāo)記語言 （ HTML ）的第五次重大修改（這是一項(xiàng)推薦標(biāo)準(zhǔn)、外語原文： W3C Recommendation、見本處 參考資料 原文內(nèi)容：[1]

）。

2014年10月29日， 萬維網(wǎng)聯(lián)盟 宣布，經(jīng)過接近8年的艱苦努力，該標(biāo)準(zhǔn)規(guī)范終于制定完成。

發(fā)展歷程

標(biāo)準(zhǔn)通用標(biāo)記語言 下的一個(gè)應(yīng)用 HTML 標(biāo)準(zhǔn)自1999年12月發(fā)布的HTML4.01后，后繼的HTML5和其它標(biāo)準(zhǔn)被束之高閣，為了推動(dòng)Web標(biāo)準(zhǔn)化運(yùn)動(dòng)的發(fā)展，一些公司聯(lián)合起來，成立了一個(gè)叫做 Web Hypertext Application Technology Working Group （Web 超文本 應(yīng)用技術(shù)工作組 - WHATWG ） 的組織。WHATWG 致力于 Web 表單和應(yīng)用程序，而 W3C （World Wide Web Consortium， 萬維網(wǎng) 聯(lián)盟） 專注于 XHTML 2.0。在 2006 年，雙方?jīng)Q定進(jìn)行合作，來創(chuàng)建一個(gè)新版本的 HTML。

HTML5草案的前身名為 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接納，并成立了新的 HTML 工作團(tuán)隊(duì)。

HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍處于完善之中。然而，大部分 現(xiàn)代瀏覽器 已經(jīng)具備了某些 HTML5 支持。

2012年12月17日， 萬維網(wǎng)聯(lián)盟 （W3C）正式宣布凝結(jié)了大量網(wǎng)絡(luò)工作者心血的HTML5規(guī)范已經(jīng)正式定稿。根據(jù)W3C的發(fā)言稿稱：“HTML5是開放的Web網(wǎng)絡(luò)平臺(tái)的奠基石。”

2013年5月6日， HTML 5.1正式草案公布。該規(guī)范定義了第五次重大版本，第一次要修訂 萬維網(wǎng) 的核心語言：超文本標(biāo)記語言（ HTML ）。在這個(gè)版本中，新功能不斷推出，以幫助Web應(yīng)用程序的作者，努力提高新元素互操作性。

本次草案的發(fā)布，從2012年12月27日至今，進(jìn)行了多達(dá)近百項(xiàng)的修改，包括HTML和XHTML的標(biāo)簽，相關(guān)的 API 、 Canvas 等，同時(shí)HTML5的圖像img標(biāo)簽及svg也進(jìn)行了改進(jìn)，性能得到進(jìn)一步提升。

支持Html5的瀏覽器包括 Firefox （火狐瀏覽器）， IE9 及其更高版本， Chrome （谷歌瀏覽器）， Safari ，Opera等；國內(nèi)的傲游瀏覽器（Maxthon），以及基于IE或 Chromium （Chrome的工程版或稱實(shí)驗(yàn)版）所推出的 360瀏覽器 、 搜狗瀏覽器 、 QQ瀏覽器 、 獵豹瀏覽器 等國產(chǎn)瀏覽器同樣具備支持HTML5的能力。

在移動(dòng)設(shè)備開發(fā)HTML5應(yīng)用只有兩種方法，要不就是全使用HTML5的語法，要不就是僅使用JavaScript引擎。

JavaScript 引擎的構(gòu)建方法讓制作手機(jī)網(wǎng)頁游戲成為可能。由于界面層很復(fù)雜，已預(yù)訂了一個(gè) UI 工具包去使用。

純HTML5手機(jī)應(yīng)用運(yùn)行緩慢并錯(cuò)漏百出，但優(yōu)化后的效果會(huì)好轉(zhuǎn)。盡管不是很多人愿意去做這樣的優(yōu)化，但依然可以去嘗試。

HTML5手機(jī)應(yīng)用的最大優(yōu)勢就是可以在網(wǎng)頁上直接 調(diào)試 和修改。原先應(yīng)用的開發(fā)人員可能需要花費(fèi)非常大的力氣才能達(dá)到HTML5的效果，不斷地重復(fù)編碼、調(diào)試和運(yùn)行，這是首先得解決的一個(gè)問題。因此也有許多手機(jī)雜志客戶端是基于HTML5標(biāo)準(zhǔn)，開發(fā)人員可以輕松調(diào)試修改。

2014年10月29日，萬維網(wǎng)聯(lián)盟淚流滿面地宣布，經(jīng)過幾乎8年的艱辛努力，HTML5標(biāo)準(zhǔn)規(guī)范終于最終制定完成了，并已公開發(fā)布。

在此之前的幾年時(shí)間里，已經(jīng)有很多開發(fā)者陸續(xù)使用了HTML5的部分技術(shù)， Firefox 、 Google Chrome 、Opera、Safari 4+、Internet Explorer 9+都已支持HTML5，但直到今天，我們才看到“正式版”。

HTML5將會(huì)取代1999年制定的HTML 4.01、XHTML 1.0標(biāo)準(zhǔn)，以期能在互聯(lián)網(wǎng)應(yīng)用迅速發(fā)展的時(shí)候，使網(wǎng)絡(luò)標(biāo)準(zhǔn)達(dá)到符合當(dāng)代的網(wǎng)絡(luò)需求，為桌面和移動(dòng)平臺(tái)帶來無縫銜接的豐富內(nèi)容。

W3C CEO Jeff Jaffe博士表示：“HTML5將推動(dòng)Web進(jìn)入新的時(shí)代。不久以前，Web還只是上網(wǎng)看一些基礎(chǔ)文檔，而如今，Web是一個(gè)極大豐富的平臺(tái)。我們已經(jīng)進(jìn)入一個(gè)穩(wěn)定階段，每個(gè)人都可以按照標(biāo)準(zhǔn)行事，并且可用于所有瀏覽器。如果我們不能攜起手來，就不會(huì)有統(tǒng)一的Web?！?/p>

HTML5還有望成為夢想中的“開放Web平臺(tái)”(Open Web Platform)的基石，如能實(shí)現(xiàn)可進(jìn)一步推動(dòng)更深入的跨平臺(tái)Web應(yīng)用。

接下來，W3C將致力于開發(fā)用于實(shí)時(shí)通信、 電子支付 、應(yīng)用開發(fā)等方面的標(biāo)準(zhǔn)規(guī)范，還會(huì)創(chuàng)建一系列的隱私、安全防護(hù)措施。

W3C還曾在2012年透露說，計(jì)劃在2016年底前發(fā)布HTML 5.1。

什么是 HTML5?

TML5是什么？

HTML5是指第5代HTML（超文本標(biāo)記語言），也指用HTML5語言制作的一切數(shù)字產(chǎn)品。

網(wǎng)上的網(wǎng)頁，多數(shù)都是由HTML寫成的。

“超文本”是指頁面內(nèi)可以包含圖片、鏈接，甚至音樂、程序等非文字元素。

而“標(biāo)記”指的是這些超文本必須由包含屬性的開頭與結(jié)尾標(biāo)志來標(biāo)記。

瀏覽器通過解碼HTML，就可以把網(wǎng)頁內(nèi)容顯示出來。

下圖中就很清晰的指出了H5的涵蓋范圍：

HTML5之所以能引發(fā)如此廣泛的效應(yīng)，根本在于它不再只是一種標(biāo)記語言，它為下一代互聯(lián)網(wǎng)提供了全新的框架和平臺(tái)，包括提供免插件的音視頻、圖像動(dòng)畫、本體存儲(chǔ)以及更多酷炫而且重要的功能，并使這些應(yīng)用標(biāo)準(zhǔn)化和開放化，從而使互聯(lián)網(wǎng)也能夠輕松實(shí)現(xiàn)類似桌面的應(yīng)用體驗(yàn)。

文章名稱：html5運(yùn)動(dòng),html5移動(dòng)
URL標(biāo)題：http://jinyejixie.com/article46/dsdijeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、移動(dòng)網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、網(wǎng)站維護(hù)、網(wǎng)站改版、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)