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 相关文章推荐
服务器安全设置的几个注册表设置
Jul 28 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
浅谈javascript 归并方法
Jan 21 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
javascript小数精度丢失的完美解决方法
May 31 Javascript
jquery——九宫格大转盘抽奖实例
Jan 16 Javascript
详谈JavaScript的闭包及应用
Jan 17 Javascript
DOM事件探秘篇
Feb 15 Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 Javascript
详解vue 组件之间使用eventbus传值
Oct 25 Javascript
angular2 ng2-file-upload上传示例代码
Aug 23 Javascript
vue路由前进后退动画效果的实现代码
Dec 10 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实现将GB编码转换为UTF8
2006/11/25 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
又一个小巧的图片预加载类
2007/05/05 Javascript
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
文本框水印提示效果的简单实现代码
2014/02/22 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
javascript实现unicode与ASCII相互转换的方法
2015/12/10 Javascript
js实现根据身份证号自动生成出生日期
2015/12/15 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
JavaScript WeakMap使用详解
2021/02/05 Javascript
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
关于box-sizing的全面理解
2016/07/28 HTML / CSS
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
致长跑运动员广播稿
2014/01/31 职场文书
检举信的格式及范文
2014/04/04 职场文书
化学专业毕业生求职信
2014/07/28 职场文书
贷款委托书怎么写
2014/08/02 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书