一.簡介

波，在空間以特定形式傳播的物理量或物理量的擾動(dòng)。由于是以特定的形式傳播，這個(gè)物理量（或其擾動(dòng)，下同）成為空間位置和時(shí)間的函數(shù),而且是這樣的函數(shù),即在時(shí)間t出現(xiàn)在空間r處周圍的分布,會(huì)在時(shí)間(t+t┡)出現(xiàn)在空間(r+vt┡)的周圍。 v一般說是個(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)

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

       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;
       } 

效果如下：

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

       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();

效果如下：

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

       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();

三.在線演示

下篇預(yù)告：《3DWave》

您可能還喜歡：http://www.rzrgm.cn/iamzhanglei/archive/2011/09/30/2196793.html

您可能還喜歡：http://www.rzrgm.cn/iamzhanglei/archive/2011/09/20/2182038.html