徐維禎 林國(guó)華 李鵬飛

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

?

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

徐維禎 林國(guó)華 李鵬飛

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

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

電場(chǎng)線 等勢(shì)面 Canvas JavaScript

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

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

1 基本原理

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

1.1 電場(chǎng)線的畫法

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

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

1.2 等勢(shì)面的畫法

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

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

圖1 畫電場(chǎng)線程序流程圖

2 實(shí)際效果

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

圖2 1個(gè)電荷

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

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

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

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

圖7 4個(gè)電荷

圖6 3個(gè)電荷

圖8 10個(gè)電荷

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

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

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

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

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

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

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

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

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