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 toggle使用分析
Nov 16 Javascript
自己封装的常用javascript函数分享
Jan 07 Javascript
使用jQuery获取data-的自定义属性
Nov 10 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
js Canvas实现的日历时钟案例分享
Dec 25 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 Javascript
Vue页面跳转动画效果的实现方法
Sep 23 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 Javascript
JS中的函数与对象的创建方式
May 12 Javascript
浅谈node.js中间件有哪些类型
Apr 29 Javascript
ant design vue的form表单取值方法
Jun 01 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
PHP数据缓存技术
2007/02/14 PHP
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
详解PHP数组赋值方法
2015/11/07 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
extJs 下拉框联动实现代码
2010/04/09 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
解决vue props 拿不到值的问题
2018/09/11 Javascript
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
2019/04/02 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
weui中的picker使用js进行动态绑定数据问题
2019/11/06 Javascript
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
Python中音频处理库pydub的使用教程
2017/06/07 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
python mysql断开重连的实现方法
2019/07/26 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
vue项目实现分页效果
2021/03/24 Vue.js
致百米运动员广播稿
2014/01/29 职场文书
客服部班长工作责任制
2014/02/25 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
宝宝满月祝酒词
2015/08/10 职场文书
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js