如何用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之所以能引發如此廣泛的效應，根本在于它不再只是一種標記語言，它為下一代互聯網提供了全新的框架和平臺，包括提供免插件的音視頻、圖像動畫、本體存儲以及更多酷炫而且重要的功能，并使這些應用標準化和開放化，從而使互聯網也能夠輕松實現類似桌面的應用體驗。

文章名稱：html5運動,html5移動
URL標題：http://vcdvsql.cn/article46/dsdijeg.html

成都網站建設公司_創新互聯，為您提供App開發、移動網站建設、標簽優化、網站維護、網站改版、定制網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯