整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
圖1
圖2
圖3
圖4
圖5
圖6
圖7
圖8
圖9
圖10
「鏈接」
個(gè)html5的錄音回放的demo附源碼，真實(shí)有效，適合前端二次開(kāi)發(fā)。
演示地址
http://www4.qietu.com/test/audio_test/
地址也許會(huì)失效，加微信公眾號(hào)qietuwang保險(xiǎn)一點(diǎn)
下載地址
http://www.qietu.cn/blog-1-132.html
在之前的一篇文章《用HTML5的canvas來(lái)畫(huà)一個(gè)夢(mèng)幻星空，來(lái)學(xué)習(xí)一下吧》中，我們使用HTML5的canvas畫(huà)出了一個(gè)夢(mèng)幻星空的效果。今天這篇文章我們繼續(xù)使用canvas來(lái)畫(huà)出幾個(gè)簡(jiǎn)單的小球運(yùn)動(dòng)效果，一起來(lái)看看吧。
本文源碼已經(jīng)開(kāi)源到Github上，感興趣的可以自取，Github地址如下。
https://github.com/zhouxiongking/article-pages/tree/master/articles/movaByCanvas
HTML5
首先我們來(lái)看看小球直線運(yùn)動(dòng)的效果圖，如下所示。
運(yùn)動(dòng)效果圖
然后我們來(lái)分析下，這個(gè)效果是如何實(shí)現(xiàn)的。
首先設(shè)置畫(huà)布寬高等信息，然后利用canvas畫(huà)出一個(gè)小球，設(shè)定初始狀態(tài)，包括顏色，半徑，初始位置等信息。
設(shè)定一個(gè)定時(shí)器，每次動(dòng)態(tài)更新小球的位置，由于定時(shí)器時(shí)間比較短，肉眼觀察下，相當(dāng)于小球運(yùn)動(dòng)的效果。
通過(guò)上述的分析，我們得出以下的代碼。
對(duì)于canvas頁(yè)面的HTML代碼永遠(yuǎn)都只包含一個(gè)元素。
HTML代碼
接下來(lái)是主要的Javascript代碼，首先是畫(huà)布，小球初始信息的設(shè)置，并設(shè)置定時(shí)器函數(shù)。
小球初始信息
然后是執(zhí)行的定時(shí)器函數(shù)，動(dòng)態(tài)更新小球的位置，當(dāng)小球運(yùn)動(dòng)出畫(huà)布范圍后，重新從起點(diǎn)位置開(kāi)始運(yùn)動(dòng)。
定時(shí)器函數(shù)
就這兩段代碼，就可以實(shí)現(xiàn)出以上的小球勻速直線運(yùn)動(dòng)的效果。
首先，我們來(lái)看看小球勻速圓周運(yùn)動(dòng)的效果圖，如下所示。
運(yùn)動(dòng)效果圖
接下來(lái)我們同樣來(lái)分析下這個(gè)效果是如何實(shí)現(xiàn)的。
首先畫(huà)出兩個(gè)小圓，一個(gè)是藍(lán)色，一個(gè)是紅色，設(shè)定初始信息和上述例子一樣。
設(shè)定定時(shí)器，每次清除畫(huà)布后，重新渲染，并且更新小藍(lán)球的位置，由于是圓周運(yùn)動(dòng)，并不會(huì)出現(xiàn)上述例子中移出畫(huà)布的情況。
通過(guò)上面的描述，我們得出以下代碼，HTML代碼一樣，這里不再給出。
首先是原始小藍(lán)球的繪制，并設(shè)置定時(shí)器。
小藍(lán)球的繪制
然后是小紅球的繪制。
小紅球的繪制
最后是定時(shí)器函數(shù)的實(shí)現(xiàn)，在該函數(shù)中會(huì)讓小藍(lán)球旋轉(zhuǎn)一定的角度。
定時(shí)器函數(shù)
至此，小球的勻速圓周運(yùn)動(dòng)效果代碼就完全實(shí)現(xiàn)了。
今天這篇文章主要是利用HTML5的canvas實(shí)現(xiàn)了一些簡(jiǎn)單的小球運(yùn)動(dòng)效果，你學(xué)會(huì)了嗎？
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
