利用Canvas描繪多個(gè)點(diǎn)電荷的電場線和等勢面

徐維禎 林國華 李鵬飛

(鎮(zhèn)江船艇學(xué)院基礎(chǔ)部物理教研室 江蘇 鎮(zhèn)江 212003)

?

利用Canvas描繪多個(gè)點(diǎn)電荷的電場線和等勢面

徐維禎 林國華 李鵬飛

(鎮(zhèn)江船艇學(xué)院基礎(chǔ)部物理教研室 江蘇 鎮(zhèn)江 212003)

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

電場線 等勢面 Canvas JavaScript

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

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

1 基本原理

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

1.1 電場線的畫法

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

以上述方向?yàn)榻亲鴺?biāo)零點(diǎn)，每間隔30°畫一條電場線(畫圖重復(fù)以上過程)，循環(huán)一周，共畫出12條電場線.之后精簡算法，設(shè)置畫圖范圍.

1.2 等勢面的畫法

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

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

圖1 畫電場線程序流程圖

2 實(shí)際效果

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

圖2 1個(gè)電荷

圖3 2個(gè)等量同號電荷

圖4 2個(gè)等量異號電荷

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

圖5 2個(gè)不等量電荷

圖7 4個(gè)電荷

圖6 3個(gè)電荷

圖8 10個(gè)電荷

3 實(shí)用價(jià)值

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

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

2 劉映棟. 大學(xué)物理實(shí)驗(yàn)教程.南京：東南大學(xué)出版社，2005

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

4 孔祥鯤，原立格，楊宏偉. 基于Matlab構(gòu)建點(diǎn)電荷系的電勢與電場強(qiáng)度分布圖. 實(shí)驗(yàn)技術(shù)與管理,2007(10)： 75～78

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

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

7 林國華，王永順. 運(yùn)用MATLAB程序演示點(diǎn)電荷系的等勢面. 物理通報(bào)，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)