脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript 沿五角星形线摆动的小圆

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

 更新时间：2020年07月28日 11:06:22   作者：aTeacher  
这篇文章主要介绍了JavaScript实现沿五角星形线摆动的小圆实例详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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

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实现沿五角星形线摆动的小圆实例详解的文章就介绍到这了,更多相关JavaScript 沿五角星形线摆动的小圆内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JS动态更改div高度实现代码例子

    JS动态更改div高度实现代码例子

    在Web开发中通过使用JavaScript可以动态地修改HTML元素的属性和样式,下面这篇文章主要给大家介绍了关于JS动态更改div高度实现的相关资料,文中给出了详细的代码示例,需要的朋友可以参考下
    2023-11-11
  • 一文全面解析JS中的this绑定规则

    一文全面解析JS中的this绑定规则

    写过JavaScript的都知道,JS中的this相对来讲是比较难以捉摸的,尤其在一些复杂的场景下的指向总是让人摸不着头脑,所以这篇文章我们就来系统的学习和研究一下this的绑定规则,需要的朋友可以参考下
    2024-04-04
  • JS解析XML实例分析

    JS解析XML实例分析

    这篇文章主要介绍了JS解析XML的方法,实例分析了javascript针对IE浏览器与非IE浏览器解析XML文件的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-01-01
  • uni-app分包项目实战总结

    uni-app分包项目实战总结

    在使用uniapp开发过程中,随着我们的代码工程越来越大,必然会面临一个问题,就是打出来的包会越来越大,下面这篇文章主要给大家介绍了关于uni-app分包项目实战的相关资料,需要的朋友可以参考下
    2022-04-04
  • JavaScript中切割截取字符串的7种方法

    JavaScript中切割截取字符串的7种方法

    在开发中常常会需要截取字符串,而 JavaScript 提供了很多种方法实现截取操作,本文主要介绍了JavaScript中切割截取字符串的7种方法,感兴趣的可以了解一下
    2024-02-02
  • 使用js复制链接中的部分文字的方法

    使用js复制链接中的部分文字的方法

    这篇文章介绍了使用js复制链接中的部分文字的方法，技巧很实用，需要的朋友可以参考下
    2015-07-07
  • 解析javascript中鼠标滚轮事件

    解析javascript中鼠标滚轮事件

    这篇文章主要给大家详细介绍了javascript中鼠标滚轮事件，图文并茂，十分的详细，有需要的小伙伴可以参考下。
    2015-05-05
  • JS中的回调函数实例浅析

    JS中的回调函数实例浅析

    这篇文章主要介绍了JS中的回调函数,结合实例形式简单分析了javascript回调函数的感念、功能、使用方法及相关注意事项,需要的朋友可以参考下
    2018-03-03
  • JavaScript中奇葩的假值示例应用

    JavaScript中奇葩的假值示例应用

    这篇文章主要介绍了JavaScript中奇葩的假值应用,需要的朋友可以参考下
    2014-03-03
  • 微信小程序实战之打卡时钟的绘制

    微信小程序实战之打卡时钟的绘制

    这篇文章主要介绍了如何利用微信小程序制作一个打卡时钟，分为工作和休息两种状态，用户可以设置相应的时间，所有的时钟记录都会被保存下来，感兴趣的可以了解一下
    2022-04-04

最新评论