利用Canvas描繪多個點電荷的電場線和等勢面

徐維禎 林國華 李鵬飛

(鎮江船艇學院基礎部物理教研室 江蘇 鎮江 212003)

?

利用Canvas描繪多個點電荷的電場線和等勢面

徐維禎 林國華 李鵬飛

(鎮江船艇學院基礎部物理教研室 江蘇 鎮江 212003)

利用JavaScript 和Canvas 等編寫了一個程序，可以用來同時描繪多個點電荷的電場線和等勢面.本程序可以直接在網絡瀏覽器中運行，以網頁的形式顯示出多個點電荷的電場線和等勢面的分布圖.電荷數量可選,每個電荷的電荷量大小可在一定范圍內任意設置.程序界面形象直觀，方便實用，運行速度快，具有較高的實際教學和應用價值.

電場線 等勢面 Canvas JavaScript

在電磁學的教學內容中，電場強度和電勢是學習的重點.學習電場強度和電勢及它們的分布對理解電場的理論知識以及研究、應用電磁場都有著重要的作用.在大部分的物理教材中，對電場強度和電勢的分布的學習主要就是學習電場線和等勢面，而這兩者都是通過作圖的方法描繪電場和電勢的分布，因此，通常在教材和教學中都是使用幾幅典型的模擬圖作為展示.常見的情況為一個正點電荷、一個負點電荷、一對等量同號電荷、一對等量異號電荷等[1].實際上，幾張片面的圖像是不能全面展示多個不同性質點電荷的分布的，因此，如果能通過一個軟件就能任意畫出多個點電荷周圍電場強度和電勢分布，那么將會給電場和電勢的學習帶來質的飛躍.

曾有許多人嘗試用軟件的形式來描繪點電荷的等勢面和電場線，比如有的畫出了電場線，但點電荷只能分布在一條直線上[3]；比如有的畫出了電場線和等勢面，但僅適用于單獨的點電荷[4]；有的畫出了多個點電荷的電場線和等勢面，但是必須基于某一個軟件平臺(比如MATLAB，VC+ +)[5].為方便學生學習和對電場的應用需要，我們編寫了能畫出任意分布的多個點電荷電場線和等勢面的程序，且程序不需要任何平臺，直接用瀏覽器就能運行.這樣就可方便應用于多種場合，形象直觀，互動效果好，也可用于大學物理網絡課程，具有較高的實用價值.

1 基本原理

本程序設計的基本思路是強調方便實用性，不用除操作系統以外的任何其他軟件平臺，也不需要任何附件，直接用網絡瀏覽器打開即可運行.因此所使用的程序語言必須是基于網頁的HTML以及在其基礎上的一些程序語言，比如JavaScript和PHP.由于需要實現在網頁上畫圖，綜合考慮后，我們在多種方法中選擇使用了Canvas，利用該程序能把兩點連線的基本特性繪制成圖形.下面就電場線和等勢面兩個方面分別予以說明.

1.1 電場線的畫法

首先設定電荷數為字母n，起點為(x,y),終點為(xz,yz)，利用電場強度公式計算一個電荷在(x,y)的場強表達式(xc,yc)，由于有多個電荷，所以將每個電荷的場強疊加，疊加后的場強為(xcn，ycn).令(xcn,ycn)單位化得一個步長(xs，ys)，從起點(x，y)出發，前進一個步長，計算出其坐標，與前一個坐標(點)相連，以此類推，便能畫出完整的電場線.操作流程如圖1所示.

以上述方向為角坐標零點，每間隔30°畫一條電場線(畫圖重復以上過程)，循環一周，共畫出12條電場線.之后精簡算法，設置畫圖范圍.

1.2 等勢面的畫法

利用等勢面與電場線相互垂直的特點，我們可以在畫電場線的基礎上得到等勢面.先設定等勢面的間距和相鄰等勢面的電勢差值.選定一個電荷，按照計算電場線的方式求出這條電場線的點，每求出一個點，都驗證這個點是否在我們設定好的等勢面上，若不是則繼續找點；若是，則以這個點為起點，按照與電場線垂直的方向(斜率乘以-1)移動一個單位長度，求出其坐標并與起點相連.再求出這個點的電場方向，找與其垂直的方向，重復以上過程便能得到閉合的等勢面.最后設定畫圖邊界.在此過程中，多個點電荷會出現重復畫圖的現象，需設定條件，在重復時跳出畫圖循環解決問題.

編程基于JavaScript語言，設計互動界面，界面簡單明了，使用操作方便.為方便使用者操作，程序本身理論上可以畫出無限多個電荷的情況，但考慮到實際意義和電腦資源的承受能力，程序設定最多可以選擇10個電荷，并設計了放大和縮小功能.

圖1 畫電場線程序流程圖

2 實際效果

由于每臺電腦操作系統不同，安裝的瀏覽器的種類及其版本也不同，因此，實際顯示的效果會略有差別，運行速度也會有所差別.我們使用了多種瀏覽器進行了測試，不同瀏覽器運行速度差異較大.以下是在IE9瀏覽器環境下對本程序的實際演示，首先，圖2至圖4分別演示了1個電荷、2個等量同號電荷、2個等量異號電荷的情形.

圖2 1個電荷

圖3 2個等量同號電荷

圖4 2個等量異號電荷

我們還演示了更一般電荷分布的情形，圖5至圖8分別為2個不等量電荷、3個電荷、4個電荷以及10個電荷的情況.在顯示的圖形中，虛線表示的是等勢面，實線表示的是電場線.“重置”按鈕用于清空數據，“放大”和“縮小”按鈕能按一定比例實現圖形的縮放.

圖5 2個不等量電荷

圖7 4個電荷

圖6 3個電荷

圖8 10個電荷

3 實用價值

本程序不僅能畫出多個點電荷的等勢面和電場線，點電荷的排列也可以任意分布，而且不需要其他的軟件平臺，只需要用瀏覽器打開即可，所占空間非常小，不受限制，可直接應用于多媒體課件和大學物理網絡課程，有較高的實用價值.在程序編輯的過程中，涉及到許多電場強度和電勢的計算、電場強度和電勢的定義、疊加原理，對大學物理課程中電場線和等勢面的教學有一定的輔助作用.

1 馬文蔚. 物理學(第5版). 北京：高等教育出版社，2006

2 劉映棟. 大學物理實驗教程.南京：東南大學出版社，2005

3 陳偉，易志俊，丁益民. 利用Matlab模擬點電荷系的電場線和等勢面. 大學物理實驗，2014(6)： 94～96

4 孔祥鯤，原立格，楊宏偉. 基于Matlab構建點電荷系的電勢與電場強度分布圖. 實驗技術與管理,2007(10)： 75～78

5 石鵬，馬鳳翔. VC+ +實現點電荷電場線與電勢線的繪制. 物理與工程，2013(3)：61～64

6 劉艷磊，李春燕，張軍海，等. 點電荷系電場線與等勢面的Matlab仿真. 科技創新導報，2012(15)：149～150

7 林國華，王永順. 運用MATLAB程序演示點電荷系的等勢面. 物理通報，2003(12)：27～28

Drawing the Electric Field Lines and Equipotential Surfaces of Multiple Point Charges Using Canvas

Xu Weizhen Lin Guohua Li Pengfei

(Watercraft College, Zhenjiang, Jiangsu 212003 )

A program which is written in JavaScript and Canvas is introduced to draw the electric field lines and equipotential surfaces of multiple electric charges. This program can be run in browser and shown the electric field lines and equipotential surfaces on the website. It is variable in the number and the quantity of electric charges. It is easy to use and quick to run and it has comparatively higher value in class and application.

electric field lines; equipotential surfaces; Canvas; JavaScript

2016-05-28)