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

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. GeckoDriver+Selenium+Python的安装和使用

    如果没有安装GeckoDriver会提示: selenium.common.exceptions.WebDriverException: Message: 'geckodriver' executab ...

  2. Appium查看应用包名

    方式一没有apk 如果应用已经安装在手机上了(例如应用商城下载).可以直接打开手机上该应用, 进入到要操作的界面然后执行: adb shell dumpsys activity recents | f ...

  3. JavaWeb网上图书商城完整项目--day02-14.登录功能的login页面处理

    1.现在注册成功之后,我们来到登录页面,登录页面在于 在登录页面.我们也需要向注册页面一样对登录的用户名.密码 验证码等在jsp页面中进行校验,校验我们单独放置一个login.js文件中进行处理,然后 ...

  4. 一起玩转微服务（12）——揭密starter

    介绍 Spring Boot的starter主要用来简化依赖用的,对于企业级开发中的与第三方的集成,可以通过一段简单的配置来完成,这样开发人员无需再对包依赖的问题头疼.Spring Boot为我们提供 ...

  5. Alink漫谈(八) : 二分类评估 AUC、K-S、PRC、Precision、Recall、LiftChart 如何实现

    Alink漫谈(八) : 二分类评估 AUC.K-S.PRC.Precision.Recall.LiftChart 如何实现 目录 Alink漫谈(八) : 二分类评估 AUC.K-S.PRC.Pre ...

  6. 动态追踪技术之SystemTap

    SystemTap SystemTap是一个深入检查Linux系统活动的工具,使用该工具编写一些简单的代码就可以轻松的提取应用或内核的运行数据,以诊断复杂的性能或者功能问题.有了它,开发者不再需要重编 ...

  7. Spring WebFlux 01 (原理及使用场景)

    一.什么是 Spring WebFlux 好多人以为Spring WebFlux就是Spring MVC的升级版,其实不然,那到底什么是Spring WebFlux呢,首先就要搞清楚Spring We ...

  8. FastAPI 快速搭建一个REST API 服务

    最近正好在看好的接口文档方便的工具, 突然看到这个, 试了一下确实挺方便 快速示例 from fastapi import FastAPI from pydantic import BaseModel ...

  9. JavaScript基础函数体中的唯一var模式(002)

    全局变量是不好的.所以在声名变量的时候,应该采用函数体中的唯一var模式(Single var Pattern).这个模式有不少好处: 提供了一个唯一的地方来查看函数体中声名的变量 在使用一个变量之前 ...

  10. day05数据绑定

    流程:普通编辑-添加编辑模式 <text>数据绑定</text> <view>{{message}}</view> <button bindtap ...