本文小編為大家詳細(xì)介紹“HTML5怎么實(shí)現(xiàn)波的效果”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“HTML5怎么實(shí)現(xiàn)波的效果”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

為中江等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及中江網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、中江網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

一.簡(jiǎn)介

波，在空間以特定形式傳播的物理量或物理量的擾動(dòng)。由于是以特定的形式傳播，這個(gè)物理量（或其擾動(dòng)，下同）成為空間位置和時(shí)間的函數(shù),而且是這樣的函數(shù),即在時(shí)間t出現(xiàn)在空間r處周圍的分布,會(huì)在時(shí)間(t+t┡)出現(xiàn)在空間(r+vt┡)的周圍。 v一般說(shuō)是個(gè)常矢量,就是有關(guān)物理量（或其擾動(dòng)）的傳播速度。物理量函數(shù)稱為波函數(shù)，數(shù)學(xué)上它是一個(gè)叫波動(dòng)方程的在特定邊界條件下的解。

物理定義：某一物理量的擾動(dòng)或振動(dòng)在空間逐點(diǎn)傳遞時(shí)形成的運(yùn)動(dòng)。不同形式的波雖然在產(chǎn)生機(jī)制、傳播方式和與物質(zhì)的相互作用等方面存在很大差別，但在傳播時(shí)卻表現(xiàn)出多方面的共性，可用相同的數(shù)學(xué)方法描述和處理。

二.實(shí)現(xiàn)

波是由無(wú)數(shù)的點(diǎn)組成，每個(gè)點(diǎn)有著自己的運(yùn)動(dòng)方向和速度大小。為了實(shí)現(xiàn)波的效果，我們首先模擬波上的點(diǎn)：

JavaScript Code復(fù)制內(nèi)容到剪貼板

var c = document.getElementById("myCanvas");  

    var cxt = c.getContext("2d");   

    var angel = 2 * Math.PI;  

    var step = Math.PI / 10;  

    function draw() {  

        cxt.clearRect(0, 0, 1000, 1000);  

        for (var i = 0; i < 600; i += 10) {  

            cxt.fillStyle = randomColor();  

            cxt.beginPath();  

            angel -= step;  

            cxt.arc(i, 100, 7, 0, Math.PI * 2, true);  

            cxt.closePath();  

            cxt.fill();  

        }  

    }  

    draw();  

    function randomColor() {  

        var arrHex = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"]; var strHex = "#";  

        var index;  

        for (var i = 0; i < 6; i++) {  

            index = Math.round(Math.random() * 15);  

            strHex += arrHex[index];  

        }  

        return strHex;  

    }  

效果如下：

image 

然后我們讓波上的每個(gè)點(diǎn)回到某一時(shí)刻它該回到的位置：

JavaScript Code復(fù)制內(nèi)容到剪貼板

var c = document.getElementById("myCanvas");  

var cxt = c.getContext("2d");   

var angel = 2 * Math.PI;  

var step = Math.PI / 10;  

function draw() {  

    cxt.clearRect(0, 0, 1000, 1000);  

    for (var i = 0; i < 600; i += 10) {  

        cxt.fillStyle = randomColor();  

        cxt.beginPath();  

        angel -= step;  

        cxt.arc(i, 150 + 100 * Math.cos(angel), 7, 0, Math.PI * 2, true);  

        cxt.closePath();  

        cxt.fill();  

    }  

}  

draw();  

效果如下：

image

然后我們利用Jscex實(shí)現(xiàn)動(dòng)畫效果：

JavaScript Code復(fù)制內(nèi)容到剪貼板

var c = document.getElementById("myCanvas");  

var cxt = c.getContext("2d");      

var angel = 2 * Math.PI;  

var step = Math.PI / 10;  

function draw() {  

    cxt.clearRect(0, 0, 1000, 1000);  

    for (var i = 0; i < 600; i += 10) {  

        cxt.fillStyle = randomColor();  

        cxt.beginPath();  

               angel -= step;  

        cxt.arc(i, 150 + 100 * Math.cos(angel), 7, 0, Math.PI * 2, true);  

        cxt.closePath();  

        cxt.fill();  

    }  

}  

var step2 = 0.2;  

var waveAsync = eval(Jscex.compile("async", function () {  

    while (true) {          angel = 2 * Math.PI;  

        angel -= step2;  

        step2 += 0.1;  

        $await(Jscex.Async.sleep(100))  

        draw();  

    }  

}))  

waveAsync().start();  

讀到這里，這篇“HTML5怎么實(shí)現(xiàn)波的效果”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。