JavaScript实现沿五角星形线摆动的小圆实例详解


Posted in Javascript onJuly 28, 2020

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

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所示的沿五角星形线摆动的小圆动画效果。

JavaScript实现沿五角星形线摆动的小圆实例详解

图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所示的沿四瓣花型线摆动的小圆。

JavaScript实现沿五角星形线摆动的小圆实例详解

图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所示的沿苹果形线摆动的小圆。

JavaScript实现沿五角星形线摆动的小圆实例详解

图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所示的沿心形线摆动的小圆。

JavaScript实现沿五角星形线摆动的小圆实例详解

图4 沿心形线摆动的小圆

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

到此这篇关于JavaScript实现沿五角星形线摆动的小圆实例详解的文章就介绍到这了,更多相关JavaScript 沿五角星形线摆动的小圆内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS日历 推荐
Dec 03 Javascript
使用js解决由border属性引起的div宽度问题
Nov 26 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
Feb 23 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
jquery判断类型是不是number类型的实例代码
Oct 07 Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 Javascript
浅谈Javascript常用正则表达式应用
Mar 08 Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 22 Javascript
JavaScript实现多个物体同时运动
Mar 12 Javascript
TypeScript 运行时类型检查补充工具
Sep 28 Javascript
处理JavaScript值为undefined的7个小技巧
Jul 28 #Javascript
vue中touch和click共存的解决方式
Jul 28 #Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 #Javascript
JavaScript中window和document用法详解
Jul 28 #Javascript
vue中echarts引入中国地图的案例
Jul 28 #Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 #Javascript
JavaScript文档加载模式以及元素获取
Jul 28 #Javascript
You might like
随机广告显示(PHP函数)
2006/10/09 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
获取焦点时,利用js定时器设定时间执行动作
2010/04/02 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
js确认框confirm()用法实例详解
2016/01/07 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python交换变量
2008/09/06 Python
python3图片转换二进制存入mysql
2013/12/06 Python
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
python集合用法实例分析
2015/05/30 Python
利用Python学习RabbitMQ消息队列
2015/11/30 Python
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
HTML5 新事件 小结
2009/07/16 HTML / CSS
UGG英国官方网站:UGG UK
2018/02/08 全球购物
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
如何写出高性能的JSP和Servlet
2013/01/22 面试题
工商管理专业实习生自我鉴定
2013/09/29 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
公司会议开幕词
2015/01/29 职场文书
员工工作表现自我评价
2015/03/06 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
利用Python判断你的密码难度等级
2021/06/02 Python
MySQL8.0的WITH查询详情
2021/08/30 MySQL
Echarts如何重新渲染实例详解
2022/05/30 Javascript