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 相关文章推荐
jQuery 跨域访问问题解决方法
Dec 02 Javascript
屏蔽script注入小例子
Nov 12 Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 Javascript
JS实现身份证输入框的输入效果
Aug 21 Javascript
webpack external模块的具体使用
Mar 10 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
JS用最简单的方法实现四舍五入
Aug 27 Javascript
微信小程序实现底部弹出模态框
Nov 18 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
处理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
phpwind中的数据库操作类
2007/01/02 PHP
PHP迭代器的内部执行过程详解
2013/11/12 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
PHP数据的提交与过滤基本操作实例详解
2016/11/11 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
Javascript学习笔记二 之 变量
2010/12/15 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
vue组件学习教程
2017/09/09 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
python实现备份目录的方法
2015/08/03 Python
Ubuntu 下 vim 搭建python 环境 配置
2017/06/12 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
django站点管理详解
2017/12/12 Python
python读取xlsx的方法
2018/12/25 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
中专毕业生自荐信范文
2013/11/28 职场文书
计算机求职信
2013/12/01 职场文书
会计学自我鉴定
2014/02/06 职场文书
2014年基层党组织公开承诺书
2014/03/29 职场文书
我的老师教学反思
2014/05/01 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
岳麓书院导游词
2015/02/03 职场文书
中秋节慰问信
2015/02/15 职场文书