JavaScript动画实例：炸开的小球

【JavaScript动画实例：炸开的小球】的更多相关文章

JavaScript动画实例：炸开的小球

1．炸开的小球定义一个小球对象类Ball,它有6个属性:圆心坐标(x,y).小球半径radius.填充颜色color.圆心坐标水平方向的变化量speedX.圆心坐标垂直方向的变化量speedY. Ball类定义2个方法:绘制小球的方法draw()和小球位置发生变化的方法update(). 定义一个数组var balls = [];保存小球对象.鼠标单击画布,向数组中随机添加5~14个小球对象元素,当某个小球运动超出画布范围时,从数组中删除该小球对象元素. 编写如下的HTML代码. <html>…

JavaScript动画实例：李萨如曲线

在“JavaScript图形实例:阿基米德螺线”和“JavaScript图形实例:曲线方程”中,我们学习了利用曲线的方程绘制曲线的方法.如果想看看曲线是怎样绘制出来的,怎么办呢?编写简单的动画,就可以展示指定曲线的绘制过程. 1．李萨如曲线设定李萨如曲线的坐标方程为: X=SIN(2θ) Y=SIN(3θ) (0≤θ≤2π) 将0~2π区间等分512段,取θ的初始值π/256,按曲线方程求得坐标值(x,y),并在当前坐标处通过绘制一个实心圆的方式描点.之后每隔0.02秒,将θ的初始值加…

JavaScript动画实例：递归分形图动态展示

在“JavaScript图形实例:SierPinski三角形” 和“JavaScript图形实例:Levy曲线及其变形”等文章中我们介绍了通过递归生成分形图形的方法.我们可以将绘制的分形图形每隔一定的时间间隔后,增加递归深度重新绘制一次,这样就可以得到分形图形的动态生成效果. 1．SierPinski垫片递归深度depth从1开始,将递归绘制的SierPinski垫片每隔1秒后增加递归深度(depth++),重新绘制一遍,得到SierPinski垫片的动态生成动画效果. 编写如下的HTML代码…

JavaScript动画实例：曲线的绘制

在“JavaScript图形实例:曲线方程”一文中,我们给出了15个曲线方程绘制图形的实例.这些曲线都是根据其曲线方程,在[0,2π]区间取一系列角度值,根据给定角度值计算对应的各点坐标,然后在计算出的坐标位置描点,从而绘制出曲线. 我们可以将曲线的绘制过程动态展示出来. 例如,对于星形线的绘制,编写如下的HTML代码. <!DOCTYPE> <html> <head> <title>星形线的绘制</title> </head> &l…

JavaScript动画实例：动感小球

已知圆的坐标方程为: X=R*SIN(θ) Y=R*COS(θ) (0≤θ≤2π) 将0~2π区间等分48段,即设定间隔dig的值为π/24.θ初始值从0开始,按曲线方程求得坐标值(x,y),并在当前坐标处绘制一个半径为r(相比R,r小得多)实心圆.之后每隔0.05秒,清除画布,将θ的初始值加π/24后,按曲线方程求得新坐标值(x,y),并在求得的新坐标处再绘制一个半径为r的实心圆,这样,可以得到半径为r的圆绕半径为R的圆形轨道动态旋转的动画效果.旋转一周后(即θ的值为2π),令θ重新从…

JavaScript动画实例：旋转的圆球

1．绕椭圆轨道旋转的圆球在Canvas画布中绘制一个椭圆,然后在椭圆上绘制一个用绿色填充的实心圆.之后每隔0.1秒刷新,重新绘制椭圆和实心圆,重新绘制时,实心圆的圆心坐标发生变化,但圆心坐标仍然位于椭圆曲线上.这样,可以得到绕椭圆轨道旋转的圆球动画. 编写如下的HTML代码. <!DOCTYPE html> <head> <title>绕椭圆轨道旋转的圆球</title> <script type="text/javascript"…

JavaScript动画实例：旋转的正三角形

给定一个正三角形的重心坐标为(x0,y0),高为h,可以用如下的语句绘制一个底边水平的正三角形. ctx.beginPath(); ctx.moveTo(x0,y0-h*2/3); ctx.lineTo(x0+h/Math.sqrt(3), y0+h/3); ctx.lineTo(x0-h/Math.sqrt(3), y0+h/3); ctx.lineTo(x0,y0-h*2/3); ctx.closePath(); ctx.stroke(); 给定正三角形个数count,通过循环的方式可以绘制…