文档介绍:HTML5实验记录
********** 杨尧智
一、课题设计
本次实验的内容是用HTML5进行物理课件的制作,在构思的初始没有往复杂 的模拟方向去想,主要是看重了 HTML5的优秀的动画特性而非模拟特性,所以选
择了一个较为简单jax/latest/-full"
之后便是对于公式的编辑,使用markdown的语法即可,代码如下:
< class«*formulaM>
<- >、ds・R,d >,< R thetaA(2)'</ >
< >
>小燎做匀速运动:</ >< t'</ >
c
>故可以推得:</ >< >'v_e t=l/2 R thetaA(2) </ >,< >'theta=\sqrt(2v_e t/R)'</ >
>
< - >在点角坐株系中写出网个坐惊的解:" >< >'x・R co$(\sqrt(2v_0 t/R))4.\sqrt(2v_0 t R)
sin(\sqrt(2v_0 t/R))%</ >,< >'y«R sin(\sqrt(2v_0 t/R))-\sqrt(2v_0 t R) cos(\sqrt(2v_0 t/R)),</ >
</iv>
下面就是程序的最重要的动画模拟部分,从上面的公式结果可以看出,小球 的运动轨迹是一个圆的渐开线,是一个比较特殊,比较有美感的数学曲线,所以 我希望能将这个渐开线完整地展现出来。但这时候,出现了一个问题,Js常用的 —个动画函数requestAnimFrame()的特性是每当时间变化,一个新的关键帧便 会替代并覆盖上一个时刻的关键帧。也就是说,每次只能展示出当下的小球运动 情景,而无法“记住”之前小球的运动情况,从而导致无法绘出一个完整的轨迹。 所以如果直接动画作图,便只会看到一个小球在线的约束下不断摆开,但无法直 观地看出小球的轨迹是一个渐开线。
这个地方我想到的第一个方案是仍然使用动画作图的形式进行小球运动的 描绘,但我预先将渐开线画好,渐开线相当于一个背景的图样,这样小球运动过 程中只要通过动画的展示过程让读者看到小球一直处于所给的渐开线上,两相对 照下便可以说明小球的运动轨迹是渐开线。但是,后来我发现这个想法是有问题 的。首先,圆的渐开线在canvas中是很难画出的,canvas作图往往需要给出特 定的坐标和相应的函数关系来进行作图,图本身很难具有无限延展的特性,而渐 开线的作图则不然,渐开线是个无限延展的曲线,开放,而且其生成方式本身就 应当是动态的;其次,在小球运动过程中强行与背景的渐开线进行对照有凑上去 的感觉,肉眼也很难确定小球和轨迹的重合度到底有多大,对于物理课件而言, 这种方式是不利于教学使用的;最后就是这样做会使得动画的可调性很差,我还 是希望能够调节圆柱的半径与小球的初速度,而每次条件都对应一个完全不同的 渐开线轨迹背景,实现起来不方便,程序效率也不高。
这时候我通过进一步学****了解到,canvas画布的属性实际上还具有变量的
function dra*){currentTine)(
roqu” t A,i nF ;
(paused) {
var angle;
( 9) (
currcntTIne