五角星形线的笛卡尔坐标方程式可设为：

r=10+(3*sin(θ*2.5))^2 

x=r*cos(θ)

y=r*sin(θ)              （0≤θ≤2π）

根据这个曲线方程，在[0,2π]区间取一系列角度值，根据给定角度值计算对应的各点坐标，然后在计算出的坐标位置绘制一个填充色交替变换的小圆，从而得到沿五角星形线摆动的小圆的动画效果。

编写如下的HTML代码。

<!DOCTYPE html>

<html>

<head>

<title>沿曲线摆动的小圆</title>

</head>

<body>

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

</canvas>

<script type="text/javascript">

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

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

var i = 0;

var j = Math.PI/32;

var t = 0;

var col = ['red','orange','yellow','green','cyan','blue','magenta'];

function loop()

{

t = t + 1;

i = i + j;

if (t > 6) { t = 0; }

var r=10+9*Math.sin(2.5*i)*Math.sin(2.5*i);

var x = 7*r*Math.cos(i)+200;

var y = 7*r*Math.sin(i)+200;

context.beginPath();

context.moveTo(200, 200);

context.lineTo(x, y);

context.lineCap = 'round';

context.strokeStyle = 'rgba(50,100,255,0.6)';

context.stroke();

context.beginPath();

context.moveTo(200, 200);

context.arc(x, y, 8, 0, 2 * Math.PI);

context.fillStyle = col[t];

context.fill();

if (i>2*Math.PI)

{

j =-Math.PI/32;

context.clearRect(0, 0, 400, 400);

}

if (i<0)

{

j = Math.PI/32;

context.clearRect(0, 0,400, 400);

}

}

setInterval('loop()',300);

</script>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以在浏览器窗口中呈现出如图1所示的沿五角星形线摆动的小圆动画效果。

图1  沿五角星形线摆动的小圆

将上面程序中的语句

var r=10+9*Math.sin(2.5*i)*Math.sin(2.5*i);

var x = 7*r*Math.cos(i)+200;

var y = 7*r*Math.sin(i)+200;

改写为：

var e=80*(1+Math.cos(2*i)/4);

var f=e*(1+Math.sin(4*i));

var x=200+f*Math.cos(i);

var y=200-f*Math.sin(i);

就可以在画布中看到如图2所示的沿四瓣花型线摆动的小圆。

图2  沿四瓣花型线摆动的小圆

若改写为：

var r = 200 * Math.pow(Math.cos(i/3),3);

var x = 200 + r * Math.sin(i);

var y = 110 + r * Math.cos(i);

同时修改  if (i>2*Math.PI)  为         if (i>3*Math.PI)

就可以在画布中看到如图3所示的沿苹果形线摆动的小圆。

图3  沿苹果形线摆动的小圆

若改写为：

var r=100*Math.pow(Math.cos(2*i),0.5);

var x = 200 + 160*Math.sin(i)*Math.sin(i)*Math.sin(i);

var y = -(-170+ 10*(13*Math.cos(i)- 5*Math.cos(2*i) - 2*Math.cos(3*i) - Math.cos(4*i)));

就可以在画布中看到如图4所示的沿心形线摆动的小圆。

图4  沿心形线摆动的小圆

有兴趣的读者，可以根据自己感兴趣的曲线的参数方程，适当修改坐标位置（x,y）的计算语句，就可以看到沿指定曲线摆动的小圆的动画效果。

JavaScript动画实例：沿五角星形线摆动的小圆的更多相关文章

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

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

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

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

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

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

  4. JavaScript图形实例：五角星

    1．五角星 在半径为80的圆周上取5个点,用这5个点依次首尾连接画5条线,可以绘制出一个五角星图案. 编写如下的HTML代码. <!DOCTYPE html> <head> & ...

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

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

  6. JavaScript动画实例：动感小球

    已知圆的坐标方程为: X=R*SIN(θ) Y=R*COS(θ)     (0≤θ≤2π) 将0~2π区间等分48段,即设定间隔dig的值为π/24.θ初始值从0开始,按曲线方程求得坐标值(x,y), ...

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

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

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

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

  9. JavaScript动画实例：螺旋线

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

随机推荐

  1. 3分钟理解NMS非极大值抑制

    1. NMS被广泛用到目标检测技术中,正如字面意思,抑制那些分数低的目标,使最终框的位置更准: 2. 假如图片上实际有10张人脸,但目标检测过程中,检测到有30个框的位置,并且模型都认为它们是人脸,造 ...

  2. Mariadb之日志相关配置

    前面我们聊到了mariadb的事务,以及事务隔离级别,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/13198186.html:今天我们来聊一聊mariadb的 ...

  3. Easy [还是概率DP思想……]

    题目描述 某一天\(WJMZBMR\)在打\(osu\)~~~但是他太弱逼了,有些地方完全靠运气\(QaQ\) 我们来简化一下这个游戏的规则 有\(n\)次点击要做,成功了就是\(o\),失败了就是\ ...

  4. python中 _、__、__xx__() 区别及使用场景

    1.访问权限(private.public)与继承方式(只有public继承) 在面向对象编程语言中,类的属性与方法都会设置访问控制权限,从而满足我们的设计需求.一般而言,我们通常会将对象的属性设置为 ...

  5. JSTL版本问题

    JSTL的版本有很多,和Servlet,jsp,tomcat都有版本兼容的问题,以下是收藏的相关帖子 JSTL不同版本和EL表达式的关联  https://www.cnblogs.com/yangzh ...

  6. rhel7 rpmbuild 制作二进制程序安装包(.rpm) 简单示例

    下载rpm-build: # yum install rpm-build 如果上述方式无法安装(没配置网络源,虚拟机下是安装媒介源) 可以用下列方式下载后再安装(实践结果可能版本问题引起的缺少太多的* ...

  7. 使用.net standard实现不同内网端口的互通（类似花生壳）

    应用场景 1.公司电脑与家中电脑的远程控制,一般通过teamview.向日葵等软件,端口互通后,可以使用电脑自带的远程桌面 2.家中电脑搭建SVN.git仓库,在外网或者内网访问,一般使用云服务器,端 ...

  8. Python中的错误和异常

    前言 错误是程序中的问题,由于这些问题而导致程序停止执行.另一方面,当某些内部事件发生时,会引发异常,从而改变程序的正常流程. python中会发生两种类型的错误. 语法错误 逻辑错误(异常) 语法错 ...

  9. css3盒子模型中的box-sizing属性的使用_box sizing常用的3种属性

    box-sizing属性用来定义元素的width和height所表示的区域,该属性一般有三种值:content-box.border-box.inherit.其中inherit表示box-sizing ...

  10. 常用API - 时间日期类

    Date类 概述 java.util.Date类 表示特定的瞬间,精确到毫秒. 继续查阅Date类的描述,发现Date拥有多个构造函数,只是部分已经过时,但是其中有未过时的构造函数可以把毫秒值转成日期 ...