已知圆的坐标方程为：

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π），令θ重新从初值0开始继续动画过程。

编写如下的HTML代码。

<!DOCTYPE html>

<html>

<head>

<title>绕圆周旋转的小球</title>

</head>

<body>

<canvas id="myCanvas" width="500" height="400" style="border:3px double #996633;">

</canvas>

<script type="text/javascript">

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

var i=0;

setInterval(move,50);

function move()

{

ctx.clearRect(0,0,canvas.width,canvas.height);

var dig=Math.PI/24;

x0=250;

y0=200;

ctx.strokeStyle="green";

ctx.beginPath();

ctx.arc(x0,y0,100,0,Math.PI*2,true);

ctx.closePath();

ctx.stroke();

ctx.beginPath();

var x=100*Math.sin(i*dig)+x0;

var y=100*Math.cos(i*dig)+y0;

ctx.arc(x,y,5,0,Math.PI*2,true);

ctx.closePath();

ctx.fillStyle = "red";

ctx.fill();

i=i+1;

if (i>=48) i=0;

}

</script>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中呈现出如图1所示绕圆周旋转的小球。

图1  绕圆周旋转的小球

图1中圆周轨道只有一条，编写如下的HTML文件，通过二重循环绘制如图2所示的布满整个Canvas的多条圆周轨道。

<!DOCTYPE html>

<html>

<head>

<title>圆周轨道</title>

</head>

<body>

<canvas id="myCanvas" width="500" height="400" style="border:3px double #996633;">

</canvas>

<script type="text/javascript">

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

var dig=Math.PI/24;

for (k=0;k<=14;k++)

for (n=0;n<=17;n++)

{

x0=30*n;

y0=30*k;

ctx.beginPath();

ctx.strokeStyle="green";

ctx.arc(x0,y0,27,0,Math.PI*2,true);

ctx.closePath();

ctx.stroke();

}

</script>

</body>

</html>

图2  布满画布的多条圆周轨道

仿图1的程序，让每条轨道上都有一个小球在旋转。编写如下的HTML文件。

<!DOCTYPE html>

<html>

<head>

<title>动感小球</title>

</head>

<body>

<canvas id="myCanvas" width="500" height="400" style="border:3px double #996633;">

</canvas>

<script type="text/javascript">

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

var i=0;

setInterval(move,30);

function move()

{

ctx.clearRect(0,0,canvas.width,canvas.height);

var dig=Math.PI/24;

for (k=0;k<=14;k++)

for (n=0;n<=17;n++)

{

x0=30*n;

y0=30*k;

ctx.beginPath();

ctx.strokeStyle="green";

ctx.arc(x0,y0,27,0,Math.PI*2,true);

ctx.closePath();

ctx.stroke();

var x=27*Math.sin(i*dig)+x0;

var y=27*Math.cos(i*dig)+y0;

ctx.beginPath();

ctx.arc(x,y,3,0,Math.PI*2,true);

ctx.fillStyle = "black";

ctx.closePath();

ctx.fill();

}

i=i+1;

if (i>=48) i=0;

}

</script>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中呈现出如图3所示多个绕圆周旋转的小球。

图3  多个绕圆周旋转的小球

在图3中，所有小球旋转步调一致，整齐划一，缺少动感。如果为各个旋转的小球加上相位，并去掉轨道痕迹。修改HTML文件如下。

<!DOCTYPE html>

<html>

<head>

<title>动感小球</title>

</head>

<body>

<canvas id="myCanvas" width="500" height="400" style="border:3px double #996633;">

</canvas>

<script type="text/javascript">

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

var i=0;

setInterval(move,30);

function move()

{

ctx.clearRect(0,0,canvas.width,canvas.height);

var dig=Math.PI/24;

for (k=0;k<=14;k++)

for (n=0;n<=17;n++)

{

x0=30*n;

y0=30*k;

var x=27*Math.sin((i+k*2+n*3)*dig)+x0;

var y=27*Math.cos((i+k*2+n*3)*dig)+y0;

ctx.beginPath();

ctx.arc(x,y,3,0,Math.PI*2,true);

ctx.fillStyle = "black";

ctx.closePath();

ctx.fill();

}

i=i+1;

if (i>=48) i=0;

}

</script>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中呈现出如图4所示动感小球。

图4 动感小球

JavaScript动画实例：动感小球的更多相关文章

  1. JavaScript动画实例：李萨如曲线

    在“JavaScript图形实例:阿基米德螺线”和“JavaScript图形实例:曲线方程”中,我们学习了利用曲线的方程绘制曲线的方法.如果想看看曲线是怎样绘制出来的,怎么办呢?编写简单的动画,就可以 ...

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

    在“JavaScript图形实例:SierPinski三角形” 和“JavaScript图形实例:Levy曲线及其变形”等文章中我们介绍了通过递归生成分形图形的方法.我们可以将绘制的分形图形每隔一定的 ...

  3. JavaScript动画实例：曲线的绘制

    在“JavaScript图形实例:曲线方程”一文中,我们给出了15个曲线方程绘制图形的实例.这些曲线都是根据其曲线方程,在[0,2π]区间取一系列角度值,根据给定角度值计算对应的各点坐标,然后在计算出 ...

  4. JavaScript动画实例：炸开的小球

    1．炸开的小球 定义一个小球对象类Ball,它有6个属性:圆心坐标(x,y).小球半径radius.填充颜色color.圆心坐标水平方向的变化量speedX.圆心坐标垂直方向的变化量speedY. B ...

  5. JavaScript动画实例：旋转的圆球

    1．绕椭圆轨道旋转的圆球 在Canvas画布中绘制一个椭圆,然后在椭圆上绘制一个用绿色填充的实心圆.之后每隔0.1秒刷新,重新绘制椭圆和实心圆,重新绘制时,实心圆的圆心坐标发生变化,但圆心坐标仍然位于 ...

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

    给定一个正三角形的重心坐标为(x0,y0),高为h,可以用如下的语句绘制一个底边水平的正三角形. ctx.beginPath(); ctx.moveTo(x0,y0-h*2/3); ctx.lineT ...

  7. JavaScript动画实例：沿五角星形线摆动的小圆

    五角星形线的笛卡尔坐标方程式可设为: r=10+(3*sin(θ*2.5))^2  x=r*cos(θ) y=r*sin(θ)              (0≤θ≤2π) 根据这个曲线方程,在[0,2 ...

  8. JavaScript动画实例：螺旋线

    数学中有各式各样富含诗意的曲线,螺旋线就是其中比较特别的一类.螺旋线这个名词来源于希腊文,它的原意是“旋卷”或“缠卷”.例如,平面螺旋便是以一个固定点开始向外逐圈旋绕而形成的曲线.在2000多年以前, ...

  9. JavaScript动画实例：运动的字母特效

    已知圆的坐标方程为: X=R*SIN(θ) Y=R*COS(θ)     (0≤θ≤2π) 给定初始坐标位置(X,Y),按照圆的坐标方程,从角度angle = 0开始,每间隔angleSpeed = ...

随机推荐

  1. （三）MySQL基础查询（起别名、去重）

    资料下载请前往:链接 补充内容: 1.数据库基本结构: 2.在sqlyog中将myemployees库导入数据库的方法: 右键root@localhost ->选择 执行SQL脚本->选定 ...

  2. 线上服务的FGC问题排查，看这篇就够了！

    线上服务的GC问题,是Java程序非常典型的一类问题,非常考验工程师排查问题的能力.同时,几乎是面试必考题,但是能真正答好此题的人并不多,要么原理没吃透,要么缺乏实战经验. 过去半年时间里,我们的广告 ...

  3. 大数据之Hudi + Kylin的准实时数仓实现

    问题导读:1.数据库.数据仓库如何理解?2.数据湖有什么用途?解决什么问题?3.数据仓库的加载链路如何实现?4.Hudi新一代数据湖项目有什么优势? 在近期的 Apache Kylin × Apach ...

  4. .Net Core踩坑记：读取txt中文乱码

    迁移.net framework的项目,有块读取txt中文转码的问题,普通的不能再普通的代码,想都没想直接copy过去,也没测,结果今天就被坑了.Core是3.1版本,这是原来的代码: string ...

  5. 国外一教授坦言，用这方法能迅速成为python程序员，但都不愿意说_编程小十

    越来越多的人学习python,但你学习python用了多长的时间?#Python# 你知道如何才能迅速掌握并成为python程序员吗?   有这样的一位国外的教授说,要迅速成为python程序员,几乎 ...

  6. selenium（9）- Xpath的详细使用

    什么是Xpath 官方:XPath 是一门在 XML 文档中查找信息的语言.XPath 用于在 XML 文档中通过元素和属性进行导航 [XPath 使用路径表达式来选取 XML 文档中的节点或者节点集 ...

  7. 自由切换 网页上的 ico 图标

    自由切换 网页上的   ico   图标: 第一步:      进入这个网站 :https://www.uupoop.com/ico/?action=make 第二步:      进入网站后,然后选择 ...

  8. unknown directive "" in E:\canteen\nginx-1.16.0/conf/nginx.conf:3-------文本编辑器修改nginx配置文件的坑

    nignx小白一个,今天在配置nginx的时候,理所当然的用了文本编辑器编辑并保存了一下nginx的nginx.conf配置文件,一不小心就折腾了几个钟. 保存之后就nginx -s reload一下 ...

  9. struct2面试准备

    二 工作流程1.客户端浏览器发出HTTP请求.2.根据web.xml配置,该请求被FilterDispatcher接收3.根据struts.xml配置,找到需要调用的Action类和方法, 并通过Io ...

  10. 你的 IDEA 是如何配置的？卡不卡？试试这样配置

    本文作者在和同事的一次讨论中发现,对 IntelliJ IDEA 内存采用不同的设置方案,会对 IDE 的速度和响应能力产生不同的影响. Don't be a Scrooge and give you ...