在“JavaScript图形实例：曲线方程”一文中，我们给出了15个曲线方程绘制图形的实例。这些曲线都是根据其曲线方程，在[0,2π]区间取一系列角度值，根据给定角度值计算对应的各点坐标，然后在计算出的坐标位置描点，从而绘制出曲线。

我们可以将曲线的绘制过程动态展示出来。

例如，对于星形线的绘制，编写如下的HTML代码。

<!DOCTYPE>

<html>

<head>

<title>星形线的绘制</title>

</head>

<body>

<canvas id="myCanvas" width="300" height="300" style="border:3px double #996633;">

</canvas>

<script>

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

ctx.clearRect(0,0,300,300);

var theta=0;

var dig=Math.PI/256;

function motion()

{

ctx.beginPath();

var x = 80*Math.cos(theta)*Math.cos(theta)*Math.cos(theta)+150;

var y = 80*Math.sin(theta)*Math.sin(theta)*Math.sin(theta)+150;

ctx.arc(x,y, 3, 0, 2 * Math.PI);

ctx.closePath();

ctx.fillStyle = "red";

ctx.fill();

theta=theta+dig;

if (theta>2*Math.PI)

{

theta=0;

ctx.clearRect(0,0,300,300);

}

}

setInterval('motion()',20);

</script>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以在浏览器窗口中看到星形线的动态绘制过程，如图1所示。

图1  星形线的绘制

将上面程序中的语句

var x = 80*Math.cos(theta)*Math.cos(theta)*Math.cos(theta)+150;

var y = 80*Math.sin(theta)*Math.sin(theta)*Math.sin(theta)+150;

改写为：

x = 8*(16*Math.pow(Math.sin(theta),3))+150;

y= 150-8*(13*Math.cos(theta)-5*Math.cos(2*theta)-2*Math.cos(3*theta)-Math.cos(4*theta));

就可以在画布中看到如图2所示的心型线的动态绘制过程。

图2  心型线的绘制

对于更多的曲线，均可以如同心型线一样，根据其参数方程，适当修改坐标位置（x,y）的计算语句即可。

为此，编写如下的HTML代码。

<!DOCTYPE>

<html>

<head>

<title>曲线的绘制</title>

</head>

<body>

<canvas id="myCanvas" width="300" height="300" style="float:left;border:3px double #996633;">

</canvas>

<form><br/>

<input id="R1" name="spiral" type="radio" checked onclick="go()" />星形线<br/><br/>

<input id="R2" name="spiral" type="radio" onclick="go()" />心型线<br/><br/>

<input id="R3" name="spiral" type="radio" onclick="go()" />玫瑰线<br/><br/>

<input id="R4" name="spiral" type="radio" onclick="go()" />太阳线<br/><br/>

<input id="R5" name="spiral" type="radio" onclick="go()" />六瓣花型线<br/><br/>

</form>

<script>

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

var a=0;

function motion()

{

if(document.getElementById('R1').checked)

{

dig=Math.PI/128;

x = 80*Math.cos(a)*Math.cos(a)*Math.cos(a)+150;

y = 80*Math.sin(a)*Math.sin(a)*Math.sin(a)+150;

}

if(document.getElementById('R2').checked)

{

dig=Math.PI/128;

x = 8*(16*Math.pow(Math.sin(a),3))+150;

y= 150-8*(13*Math.cos(a)-5*Math.cos(2*a)-2*Math.cos(3*a)-Math.cos(4*a));

}

if(document.getElementById('R3').checked)

{

dig=Math.PI/400;

x=150+100 * Math.sin(4*a)*Math.cos(a);

y=150+100 * Math.sin(4*a)*Math.sin(a);

}

if(document.getElementById('R4').checked)

{

dig=Math.PI/720;

r=15*Math.cos(30*a)+12;

x = 150+5*r*Math.cos(a);

y = 150+5*r*Math.sin(a);

}

if(document.getElementById('R5').checked)

{

dig=Math.PI/512;

r=100*(1+Math.sin(18*a)/5)*(0.5+Math.sin(6*a)/2);

x=150+r*Math.cos(a);

y=150+r*Math.sin(a);

}

ctx.beginPath();

ctx.arc(x,y,2,0, 2 * Math.PI);

ctx.closePath();

ctx.fillStyle = "red";

ctx.fill();

a=a+dig;

if (a>2*Math.PI)

{

a=0;

ctx.clearRect(0,0,300,300);

}

}

function go()

{

ctx.clearRect(0,0,400,300);

a=0;

setInterval('motion()',30);

}

go();

</script>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以在浏览器窗口中看到5种曲线绘制的动画效果，如图3所示。更多曲线的绘制，大家可以根据选定的曲线方程自行添加相应代码即可。

图3  曲线绘制动画

JavaScript动画实例：曲线的绘制的更多相关文章

  1. JavaScript动画实例：李萨如曲线

    在“JavaScript图形实例:阿基米德螺线”和“JavaScript图形实例:曲线方程”中,我们学习了利用曲线的方程绘制曲线的方法.如果想看看曲线是怎样绘制出来的,怎么办呢?编写简单的动画,就可以 ...

  2. JavaScript动画实例：递归分形图动态展示

    在“JavaScript图形实例:SierPinski三角形” 和“JavaScript图形实例:Levy曲线及其变形”等文章中我们介绍了通过递归生成分形图形的方法.我们可以将绘制的分形图形每隔一定的 ...

  3. JavaScript动画实例：沿五角星形线摆动的小圆

    五角星形线的笛卡尔坐标方程式可设为: r=10+(3*sin(θ*2.5))^2  x=r*cos(θ) y=r*sin(θ)              (0≤θ≤2π) 根据这个曲线方程,在[0,2 ...

  4. JavaScript动画实例：旋转的圆球

    1．绕椭圆轨道旋转的圆球 在Canvas画布中绘制一个椭圆,然后在椭圆上绘制一个用绿色填充的实心圆.之后每隔0.1秒刷新,重新绘制椭圆和实心圆,重新绘制时,实心圆的圆心坐标发生变化,但圆心坐标仍然位于 ...

  5. JavaScript动画实例：动感小球

    已知圆的坐标方程为: X=R*SIN(θ) Y=R*COS(θ)     (0≤θ≤2π) 将0~2π区间等分48段,即设定间隔dig的值为π/24.θ初始值从0开始,按曲线方程求得坐标值(x,y), ...

  6. JavaScript动画基础：canvas绘制简单动画

    动画是将静止的画面变为动态的艺术．实现由静止到动态,主要是靠人眼的视觉残留效应.视觉残留也叫视觉暂留现象,物体在快速运动时, 当人眼所看到的影像消失后,人眼仍能继续保留其影像0.1~0.4秒左右的图像 ...

  7. JavaScript动画实例：螺旋线

    数学中有各式各样富含诗意的曲线,螺旋线就是其中比较特别的一类.螺旋线这个名词来源于希腊文,它的原意是“旋卷”或“缠卷”.例如,平面螺旋便是以一个固定点开始向外逐圈旋绕而形成的曲线.在2000多年以前, ...

  8. JavaScript动画实例：旋转的正三角形

    给定一个正三角形的重心坐标为(x0,y0),高为h,可以用如下的语句绘制一个底边水平的正三角形. ctx.beginPath(); ctx.moveTo(x0,y0-h*2/3); ctx.lineT ...

  9. JavaScript动画实例：炸开的小球

    1．炸开的小球 定义一个小球对象类Ball,它有6个属性:圆心坐标(x,y).小球半径radius.填充颜色color.圆心坐标水平方向的变化量speedX.圆心坐标垂直方向的变化量speedY. B ...

随机推荐

  1. cb20a_c++_string类型的查找

    cb20a_c++_string类型的查找s.find(args) //精确匹配,顺序查找, abc, 连续的包含在abcde,或者fabcde;s.rfind(args) //精确匹配.反向查找s. ...

  2. 一起玩转微服务（10）——spring boot介绍

    对于Spring,相信大家都非常熟悉,从出现开始,一直是企业级开发的主流.但是随着软件的发展和应用开发的不断演化,它的一些缺点也逐渐胡暴露了出来,下面,我们就一起看一下Spring的发展历程并且认识一 ...

  3. 深度解剖dubbo源码---01dubbo的架构原理-探索.mp4

    02内核解剖-dubbo自己的SPI实现.mp4 https://blog.csdn.net/prestigeding/article/details/80795708 https://segment ...

  4. Win8.1安装配置64位Oracle Database 11g的详细图文步骤记录

    在开始Oracle数据安装之前建议:1.关闭本机的病毒防火墙.2.断开互联网. 这样可以避免解压缩丢失文件和安装失败. Step1 Oracle官网下载好Windows系统64位的安装包,下载速度慢的 ...

  5. vim/vm命令后提示错误：Found a swap file by the name ".dockerfile.swp"

    今天在使用docker时,使用vim命令操作dockerfile文件,提示如下错误: 错误原因,是由于上一次在操作该文件时,异常退出,然后系统生成了一个dockerfile.swp文件,该文件是个隐藏 ...

  6. css设置边框阴影;box-shadow的使用

    html代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  7. Python-使用tkinter实现的摇骰子小游戏

    贴吧看到的一个求助题,大致需求是:3个人摇骰子,每人摇3次,点数之和最大的获胜,支持玩家名称输入.我觉得这个题目挺有意思的,做了个界面程序,欢迎大家交流指正~ #!usr/bin/env python ...

  8. IDEA中文注释难看的简单解决办法

    好多人会发现IDEA这款集成开发工具的中文(主要是在注释上面)显示都比较难看,如下面: 都以为是字体的原因,于是各种替换字体,麻烦不说,还容易造成乱码的问题. 真正难看的原因并不是字体,而是以为是斜体 ...

  9. 关于位图数据位和系统管理区大小-P6

    文章目录 1 背景 2 验证 2.1 环境信息 2.2 创建表空间tbs1 2.3 创建表段并拓展至16个区 2.4 查看3号位图块信息 2.5 拓展16号区 2.6 查看3号位图块信息 1 背景 V ...

  10. 本地连接虚拟机db2V10.5遇到的问题

    在连接虚拟机数据库时发现自己不知道db2的端口号是多少,百度上说50000,60000的都有,所以还是决定自己试一下,并记录下这个过程 # 首先切换到db2inst1的用户 su - db2inst1 ...