一.簡介

波，在空間以特定形式傳播的物理量或物理量的擾動。由於是以特定的形式傳播，這個物理量（或其擾動，下同）成為空間位置和時間的函數,而且是這樣的函數,即在時間t出現在空間r處周圍的分布,會在時間(t+t┡)出現在空間(r+vt┡)的周圍。 v一般說是個常矢量,就是有關物理量（或其擾動）的傳播速度。物理量函數稱為波函數，數學上它是一個叫波動方程的在特定邊界條件下的解。

物理定義：某一物理量的擾動或振動在空間逐點傳遞時形成的運動。不同形式的波雖然在產生機制、傳播方式和與物質的相互作用等方面存在很大差別，但在傳播時卻表現出多方面的共性，可用相同的數學方法描述和處理。

二.實現

波是由無數的點組成，每個點有著自己的運動方向和速度大小。為了實現波的效果，我們首先模擬波上的點：

JavaScript Code復制內容到剪貼板

1. var c = document.getElementById("myCanvas");  
2.     var cxt = c.getContext("2d");   
3.     var angel = 2 * Math.PI;  
4.     var step = Math.PI / 10;  
5.     function draw() {  
6.         cxt.clearRect(0, 0, 1000, 1000);  
7.         for (var i = 0; i < 600; i += 10) {  
8.             cxt.fillStyle = randomColor();  
9.             cxt.beginPath();  
10.             angel -= step;  
11.             cxt.arc(i, 100, 7, 0, Math.PI * 2, true);  
12.             cxt.closePath();  
13.             cxt.fill();  
14.         }  
15.     }  
16.     draw();  
17.     function randomColor() {  
18.         var arrHex = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"]; var strHex = "#";  
19.         var index;  
20.         for (var i = 0; i < 6; i++) {  
21.             index = Math.round(Math.random() * 15);  
22.             strHex += arrHex[index];  
23.         }  
24.         return strHex;  
25.     }  

 

效果如下：

 

然後我們讓波上的每個點回到某一時刻它該回到的位置：

JavaScript Code復制內容到剪貼板

1. var c = document.getElementById("myCanvas");  
2. var cxt = c.getContext("2d");   
3. var angel = 2 * Math.PI;  
4. var step = Math.PI / 10;  
5. function draw() {  
6.     cxt.clearRect(0, 0, 1000, 1000);  
7.     for (var i = 0; i < 600; i += 10) {  
8.         cxt.fillStyle = randomColor();  
9.         cxt.beginPath();  
10.         angel -= step;  
11.         cxt.arc(i, 150 + 100 * Math.cos(angel), 7, 0, Math.PI * 2, true);  
12.         cxt.closePath();  
13.         cxt.fill();  
14.     }  
15. }  
16. draw();  

效果如下：

 

然後我們利用JScex實現動畫效果：

JavaScript Code復制內容到剪貼板

1. var c = document.getElementById("myCanvas");  
2. var cxt = c.getContext("2d");      
3. var angel = 2 * Math.PI;  
4. var step = Math.PI / 10;  
5. function draw() {  
6.     cxt.clearRect(0, 0, 1000, 1000);  
7.     for (var i = 0; i < 600; i += 10) {  
8.         cxt.fillStyle = randomColor();  
9.         cxt.beginPath();  
10.                angel -= step;  
11.         cxt.arc(i, 150 + 100 * Math.cos(angel), 7, 0, Math.PI * 2, true);  
12.         cxt.closePath();  
13.         cxt.fill();  
14.     }  
15. }  
16. var step2 = 0.2;  
17. var waveAsync = eval(JScex.compile("async", function () {  
18.     while (true) {          angel = 2 * Math.PI;  
19.         angel -= step2;  
20.         step2 += 0.1;  
21.         $await(JScex.Async.sleep(100))  
22.         draw();  
23.     }  
24. }))  
25. waveAsync().start();