html5你能把太陽系動態(tài)做出來，但是你能把月亮也做出來嗎？

要源碼請評論后加前端學習群470593776

課題：HTML5加原生js打造一個炫酷動態(tài)的太陽系

簡介：首先對于太陽系各大星球的運轉(zhuǎn)關系，速度等資料，不然弄出來也是被噴的下場，

還有對于邏輯思維，算法的一些掌握要牢固

特別是對于HTML5+js配合使用的方式，其實現(xiàn)在很多特效都是HTML5+JS的配合使用

純html5動畫固然有優(yōu)勢，但是實用性暫時還不太高，特別是對于兼容性的一些處理

下面我們來看看部分代碼

PS：因為代碼不方便閱讀以及復制，所以只發(fā)部分源碼思路

完整的免費源碼及思路講解，請評論后加前端學習交流群470593776獲??！

代碼：

需要源碼請評論后加前端學習群470593776

天我們來學習一下如何實現(xiàn)HTML5游戲中的動態(tài)背景效果。

1通過canvas標簽生成基礎游戲背景色

canvas標簽是一個非常強大的元素，利用它可以制作復雜的功能，繪制精美的畫面。與其同時canvas相關的API方法也是特別的多，非常值得大家去學習，本節(jié)課講解基本的API方法使用。

getContext("2d")方法，用于在canvas標簽上進行2d繪圖
fillStyle方法是設置或返回用于填充繪畫的顏色，在本節(jié)課為我們的背景設置一個天藍色
beginPath和closePath方法分別表示開始繪制和結(jié)束繪制
rect方法用于繪制矩形
fill方法進行實際的顏色填充和繪制

在實際的項目應用中大家可以根據(jù)自己需要去調(diào)用它的方法

<canvas id="c"></canvas>

課程鏈接：

http://www.gbtags.com/gb/gbtutorials/792.htm

2利用arc方法繪制游戲中靜態(tài)基礎圖形

上節(jié)課已經(jīng)創(chuàng)建好了藍色的游戲背景，本節(jié)目的在于繪制出多個大小，位置，顏色不同的圓。
為了實現(xiàn)所有圓的位置不同，大小不同，我們采用隨機數(shù)的方式產(chǎn)生，把circle這個數(shù)組中push進去四個隨機數(shù)，每一個都有他們對應的關系
每一個參數(shù)分別用來用來定義圓的x軸坐標，y軸坐標，圓心半徑，顏色透明度，通過這些參數(shù)來實現(xiàn)圓的位置不同，大小不同，顏色透明度不同

<pre class="prettyprint linenums"

circles.push([Math.random() * width, Math.random() * height, Math.random() * 100, Math.random() / 2]);

通過arc方法繪制圓，arc(x,y,r,起始角，結(jié)束角，轉(zhuǎn)動方向)。例如

<pre class="prettyprint linenums"

ctx.arc(100,75,50,0,2*Math.PI);

arc方法中的參數(shù)分別帶別，圓的x軸，y軸，圓心半徑，起始角度，結(jié)束角度，旋轉(zhuǎn)方向，可以根據(jù)這些參數(shù)繪制部分圓以及完整圓。

canvas id="c"></canvas>

課程鏈接：

http://www.gbtags.com/gb/gbtutorials/802.htm

3 實現(xiàn)游戲中基礎圖形的動態(tài)背景效果

本節(jié)課添加了圓圈的動態(tài)方法，movecircles方法，用于讓圓圈不斷的從上往下掉落，并且控制了它的運動軌跡范圍，如果從上往下掉落的過程中，圓心y坐標超出畫布范圍，那么從新再賦值給圓，繼續(xù)執(zhí)行。
為了保證畫布的不斷更新，以及畫圓的方法，移動的方法不斷執(zhí)行，此處調(diào)用 setInterval(function,time)方法，該方法用于在固定周期內(nèi)執(zhí)行對應的函數(shù)表達式

setInterval(gameloop,30);

表示每0.03 秒調(diào)用一次gameloop方法。

var width = 320,
height = 400,
c = document.getElementById('c'),
ctx = c.getContext('2d');

c.width = width;
c.height = height;

var clear = function{
ctx.fillStyle = '#d0e7f9';
ctx.beginPath;
ctx.rect(0, 0, width, height);
ctx.closePath;
ctx.fill;
}

var howManyCircles = 8, circles = ;

for (var i = 0; i < howManyCircles; i++)
circles.push([Math.random() * width, Math.random() * height, Math.random() * 100, Math.random() / 2]);

var DrawCircles = function{
for (var i = 0; i < howManyCircles; i++) {
ctx.fillStyle = 'rgba(255, 255, 255, ' + circles[i][3] + ')';
ctx.beginPath;
ctx.arc(circles[i][0], circles[i][1], circles[i][2], 0, Math.PI * 2, true);
ctx.closePath;
ctx.fill;
}
};
var movecircles = function(yunm){
for (var i = 0; i < howManyCircles; i++) {
if ( circles[i][1] - circles[i][2] > height) {
circles[i][0] = Math.random * width;
circles[i][2] = Math.random * 100;
circles[i][1] = 0 - circles[i][2];
circles[i][3] = Math.random / 2;
}
else {
circles[i][1] += yunm;
}
}
}
var gameloop = function{
clear;
movecircles(3);
DrawCircles;
}
setInterval(gameloop,30)

課程鏈接：

http://www.gbtags.com/gb/gbtutorials/803.htm

想要查看具體動態(tài)效果的小伙伴，可以長按下方圖片，掃描圖中二維碼：

面火爆的HTML5生態(tài)峰會

在這個民眾對低俗八卦的興趣遠高于信息科技的時代，大家對于各種IT會議經(jīng)常需要拉人“充場面”的現(xiàn)象想必早已司空見慣。因此如果不是親眼所見，您可能很難想象一場關于HTML5的峰會現(xiàn)場居然會如此火爆。

在這場由火速科技與DCloud聯(lián)合舉辦的HTML5移動應用生態(tài)峰會上，嘉賓桌子前的地毯上坐滿了人，會場兩邊的過道上站滿了人，甚至就連最外面的大門口也是里三層外三層，被熱情的觀眾圍得水泄不通……

那么問題就來了：這場峰會的內(nèi)容究竟有著什么樣的魔力，居然能夠?qū)@么多觀眾產(chǎn)生如此大的誘惑力？

陣容鼎盛的大會演講嘉賓

對于移動互聯(lián)網(wǎng)來說，HTML5的快速崛起，將會帶來怎樣激動人心的變革與重構(gòu)？光是從這場峰會的火爆程度，我們其實就能窺見一斑（幸好這只是“爆場”，而不是“爆倉”）。

而另一方面，空前強大的嘉賓陣容，也成為了這場HTML5移動應用生態(tài)峰會的一大看點：CSDN創(chuàng)始人蔣濤，創(chuàng)新工場合伙人郎春暉，創(chuàng)業(yè)家副總裁、黑馬會秘書長紀中展，創(chuàng)新工場投資人姜證嚴，Google品牌營銷總監(jiān)張晶，創(chuàng)新工場投資人姜證嚴，火速輕應用CEO趙九州，DCloud CEO王安，HTML5夢工場創(chuàng)始人田愛娜，野狗CEO劉之，云適配聯(lián)合創(chuàng)始人高婧，搜狐快站負責人翁曉奇，TalkingData副總裁閆輝，中軟國際集團副總裁王暉，Layabox副總裁汪闊，微明互動CEO張永生，“挑食”創(chuàng)始人竇高峰，東翌互聯(lián)創(chuàng)始人白楊，oHicn創(chuàng)始人謝恩明，傳智播客教學總監(jiān)馬倫……

HTML5在2015年的井噴，不僅改變了移動互聯(lián)網(wǎng)的原有格局，而且也對原生App生態(tài)系統(tǒng)帶來了革命性的顛覆。那么未來HTML5所構(gòu)建的移動應用生態(tài)系統(tǒng)，究竟有哪些想象空間？本次峰會的嘉賓們從HTML5行業(yè)的底層技術、渠道、應用、Web App開發(fā)、用戶使用習慣、移動互聯(lián)網(wǎng)創(chuàng)新趨勢等各個角度出發(fā)，為與會觀眾詳細分析了HTML5移動應用生態(tài)的發(fā)展狀況和未來趨勢。

嘉賓現(xiàn)場分享精選

在長達幾個小時的峰會上，眾多重量級嘉賓們?yōu)橛^眾們奉上了非常精彩的演講。不過在微信快餐時代，如果我把幾個小時的速記原文貼上來，相信許多讀者一打開文章鏈接就已經(jīng)崩潰了。于是我花了不少時間對嘉賓的演講內(nèi)容做了重新整理歸納，結(jié)果發(fā)現(xiàn)這個過程其實也很讓人崩潰……因為我原本計劃在三天前發(fā)布這篇文章的。

火速科技：HTML5將重新構(gòu)建移動互聯(lián)網(wǎng)

火速輕應用CEO趙九州表示，App的HTML5化只是第一步，未來在構(gòu)建新的移動互聯(lián)網(wǎng)形態(tài)方面，HTML5還將大有可為。HTML5在產(chǎn)品形態(tài)方面的幾個方向，一是在內(nèi)容上會出現(xiàn)原生HTML5的應用，二是會出現(xiàn)內(nèi)容聚合應用的趨勢，三是在跨屏和社交游戲領域，HTML5也將充分體現(xiàn)自己的特點。至于商業(yè)解決方案，應用級建站、企業(yè)移動化解決方案、泛娛樂化的營銷解決方案，都會是非常好的發(fā)展方向。針對HTML5的行業(yè)生態(tài)，趙九州也提出了幾點建議：一是商業(yè)化降溫，盡快理清行業(yè)狀態(tài)，鼓勵探索應用的場景化；二是要抱團互助，良性競爭，通過互幫互助找到更好的方式，來幫助用戶獲得更好玩的內(nèi)容。未來HTML5的成長路徑，從游戲、廣告、應用、內(nèi)容、系統(tǒng)一直到生活方式，都將發(fā)生改變。未來的移動互聯(lián)網(wǎng)將會是一個高度智能化、高度自由化、高度離散化的移動實景，而HTML5就是構(gòu)建它的基石。

Google： HTML5將成為品牌營銷利器

Google品牌營銷總監(jiān)張晶認為，HTML5或?qū)⒊蔀槲磥砥放茽I銷的利器。因為對于品牌營銷而言，HTML5能夠開發(fā)很多新奇應用，可以跨設備應用，不需要用戶下載，給用戶提供了非常方便的體驗。2014年的中國廣告行業(yè)，互聯(lián)網(wǎng)廣告的投入第一次超過了電視，已經(jīng)達到了上千億的規(guī)模，而且還具備巨大的上升空間。因此在社交網(wǎng)絡盛行的今天，Google從2014年開始就非常關注HTML5技術在移動營銷方面的作用，甚至還專門為此設置了一個網(wǎng)站，通過剖析開發(fā)者創(chuàng)造的一些小應用，讓從業(yè)者有更多的機會發(fā)現(xiàn)什么樣的技術可以成為可能。

DCloud：HTML5將顛覆App世界

DCloud CEO王安指出，在過去的幾年里，HTML5已經(jīng)顛覆了PC互聯(lián)網(wǎng)的格局，優(yōu)化了移動互聯(lián)網(wǎng)的體驗；而接下來，HTML5還將顛覆原生App世界。過去之所以HTML5沒有發(fā)展起來，核心問題在于性能、工具、能力方面的缺失，如今提升HTML5性能的手機端引擎，讓側(cè)滑菜單、下拉刷新等動態(tài)交互卡頓的問題得以解決；HTML5開發(fā)IDE產(chǎn)品HBuilder為工程師們提供了超快的編程利器；40萬原生API封裝成JavaScript對象，Native.js技術也解決了HTML5能力不足的問題；此外最接近原生體驗的MUI高性能框架：雖然體積只有幾十K，但是加載、運行卻遠快于一般的框架。這也使得基于該方案開發(fā)的HTML5應用，完全可以達到原生App的功能和體驗。因此HTML5代表了社會的生產(chǎn)力和生產(chǎn)效率的進步方向，它的前進是不可阻擋的。

創(chuàng)業(yè)家：重度垂直與HTML5

創(chuàng)業(yè)家副總裁、黑馬會秘書長紀中展在會上提出了重度垂直——移動互聯(lián)網(wǎng)的行動方法論。作為移動互聯(lián)網(wǎng)時代的重要行動指南，重度垂直方式可幫助使用者重新構(gòu)建場景、搭建體系、形成規(guī)模，從有限的用戶挖掘出無形的價值。其特點可以用一個口訣“小、窄、深、重”來概括，即有限用戶小而美、規(guī)模不大細分行業(yè)、對用戶理解足夠深、一定要注重細節(jié)。只要掌握了這些，就能實現(xiàn)從海量用戶挖掘有限價值到從有限用戶挖掘無形價值。在“大眾創(chuàng)業(yè)、萬眾創(chuàng)新”的時代背景之下，HTML5的出現(xiàn)讓創(chuàng)業(yè)變得更加簡單，讓“互聯(lián)網(wǎng)+”變得更加容易，“微信+HTML5”這樣的高頻應用組合，讓那些低頻的App變得更加沒有存在的必要。如果HTML5今后可以向人們的生活方式擴展，那未來它的影響將不可限量。

云適配：HTML5在企業(yè)級應用的價值與實踐

云適配聯(lián)合創(chuàng)始人高婧在現(xiàn)場分享了HTML5在企業(yè)級應用中的價值與實踐。目前中國手機上網(wǎng)用戶已經(jīng)突破5億，年增長率將近20%，而90%的用戶與媒體接觸都是基于各種各樣的屏幕，這也標志著多屏互聯(lián)網(wǎng)時代的來臨。在這樣的局面下，企業(yè)移動營銷面臨兩個挑戰(zhàn)：一是跨屏，二是跨平臺。但是目前這些屏幕之間的數(shù)據(jù)和內(nèi)容都是割裂和分離的，并不符合互聯(lián)網(wǎng)精神。然而如果通過云適配的技術跨屏適配為HTML5提供一個安全的容器，則可以完美支持交互性和實現(xiàn)移動化，讓企業(yè)真正實現(xiàn)隨時隨地移動辦公。

TalkingData：真實的HTML5行業(yè)現(xiàn)狀

TalkingData副總裁閆輝為觀眾“數(shù)”說了真實的HTML5行業(yè)現(xiàn)狀。從數(shù)據(jù)平臺來看，大數(shù)據(jù)的平臺覆蓋獨立手機的量是15.5億，有將近10.8億的用戶接觸過Web瀏覽器，獨立設備覆蓋量里有4.4億用戶接觸過移動瀏覽器。從進一步的數(shù)據(jù)細分還可以看出，在瀏覽器、應用、大型應用、游戲平臺入口不斷釋放潛力巨大，但仍然存在轉(zhuǎn)化有限和活躍度不夠等問題。為了滿足用戶的游戲需求，TalkingData增加了HTML5游戲?qū)^(qū)，為了滿足用戶的生活需要，則增加了HTML5吃喝專區(qū)，體驗服務更好且主動支付轉(zhuǎn)化也較高。作為HTML5的一個重要流量入口，微信的助燃可以憑借77.5%的全移動終端覆蓋率提供9成的來源量，可通過社交網(wǎng)絡實現(xiàn)病毒式傳播，以及社交經(jīng)濟性來激發(fā)更高的活躍度。

搜狐快站：后App時代的移動新玩法

搜狐快站產(chǎn)品負責人翁曉奇就“后App時代的移動新玩法”闡述了自己的觀點：2015年中國上網(wǎng)用戶達到6億，與開發(fā)門檻高、開發(fā)周期長、CPA成本高、應用數(shù)量少的早期移動互聯(lián)網(wǎng)生態(tài)相比，HTML5移動應用生態(tài)的特點就在于形式靈活多樣，朋友圈、直達號、公眾號、二維碼、O2O均可成為入口。從媒體、旅游、交通、餐飲、零售、教育、醫(yī)療一直到上門美甲等生活服務，各行各業(yè)都將圍繞移動互聯(lián)網(wǎng)發(fā)生翻天覆地的變化。這既是傳統(tǒng)產(chǎn)業(yè)的危機，但也是善于借力移動互聯(lián)網(wǎng)工具的企業(yè)后來居上的機遇。

發(fā)布聯(lián)盟合作發(fā)展倡議書

為了更好地推進HTML5、更好地為HTML5開發(fā)者服務，在本次HTML5移動應用生態(tài)峰會上，火速科技、DCloud、CSDN等企業(yè)還聯(lián)合發(fā)布了《HTML5中國產(chǎn)業(yè)聯(lián)盟合作發(fā)展倡議書》。

HTML5中國產(chǎn)業(yè)聯(lián)盟是由產(chǎn)業(yè)鏈廠商共同組成的一個聯(lián)盟，成員包括提供工具引擎的DCloud，提供應用發(fā)行的火速輕應用，提供人才培訓的傳智播客、東翌互聯(lián)學院，提供外包眾包服務的中軟國際、微明互動、0Hicn，提供融資的極客幫投資、線性資本、中關村興業(yè)、景林資產(chǎn)、涌鏵資本等等。該聯(lián)盟致力于整合產(chǎn)業(yè)鏈資源，構(gòu)建圍繞HTML5開發(fā)者的生態(tài)系統(tǒng)，共同為HTML5開發(fā)者提供服務。而《倡議書》的內(nèi)容，也是倡導業(yè)內(nèi)人士攜手共同為HTML5開發(fā)者提供一條龍式的服務，積極促成HTML5行業(yè)良好生態(tài)的構(gòu)建。

在線咨詢

上一篇：HTML 列表
下一篇：分享 10個酷炫的后臺模板，給不愛寫頁面的程序員

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

html5你能把太陽系動態(tài)做出來，但是你能把月亮也做出來嗎？

課題：HTML5加原生js打造一個炫酷動態(tài)的太陽系

代碼：

您的項目需求

html5你能把太陽系動態(tài)做出來，但是你能把月亮也做出來嗎？