利用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)