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

1.李萨如曲线

设定李萨如曲线的坐标方程为:

X=SIN(2θ)

Y=SIN(3θ)     (0≤θ≤2π)

将0~2π区间等分512段,取θ的初始值π/256,按曲线方程求得坐标值(x,y),并在当前坐标处通过绘制一个实心圆的方式描点。之后每隔0.02秒,将θ的初始值加π/256后,按曲线方程求得新坐标值(x,y),并在求得的新坐标处再通过绘制一个实心圆的方式继续描点,这样,可以得到动态绘制的李萨如曲线。曲线绘制完成(即θ的值为2π),将画布清除,令θ重新从初值π/256开始继续动画过程。

编写如下的HTML代码。

<!DOCTYPE html>

<head>

<title>李萨如曲线</title>

<script type="text/javascript">

var context;

var i;

function draw(id)

{

var canvas = document.getElementById(id);

if (canvas == null)

return false;

context = canvas.getContext('2d');

context.fillStyle="#EEEEFF";

context.fillRect(0,0,300,300);

i=1;

setInterval(go,20);

}

function go()

{

context.strokeStyle="red";

context.lineWidth=2;

var dig=Math.PI/256;

x=150+100*Math.sin(2*i*dig);

y=150-100*Math.sin(3*i*dig);

context.beginPath();

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

context.fillStyle = "red";

context.fill();

i=i+1;

if (i>512)

{

i=1;

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

}

}

</script>

</head>

<body onload="draw('myCanvas');">

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

</canvas>

</body>

</html>

将上述HTML代码保存到一个html文本文件中,再在浏览器中打开包含这段HTML代码的html文件,可以看到在浏览器窗口中呈现出李萨如曲线的动态绘制过程,如图1所示。

图1  李萨如曲线

2.阿基米德螺线

编写HTML文件如下:

<!DOCTYPE html>

<head>

<title>阿基米德螺线</title>

<script type="text/javascript">

var context;

var i;

function draw(id)

{

var canvas = document.getElementById(id);

if (canvas == null)

return false;

context = canvas.getContext('2d');

context.fillStyle="#EEEEFF";

context.fillRect(0,0,300,300);

i=1;

setInterval(go,20);

}

function go()

{

context.strokeStyle="red";

context.lineWidth=2;

var dig=Math.PI/128;

x=150+5*i*dig*Math.sin(i*dig);

y=150+5*i*dig*Math.cos(i*dig);

context.beginPath();

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

context.fillStyle = "red";

context.fill();

i=i+1;

if (i>1024)

{

i=1;

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

}

}

</script>

</head>

<body onload="draw('myCanvas');">

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

</canvas>

</body>

</html>

将上述HTML代码保存到一个html文本文件中,再在浏览器中打开包含这段HTML代码的html文件,可以看到在浏览器窗口中呈现出阿基米德螺线的动态绘制过程,如图2所示。

图2  阿基米德螺线

3.螺旋线

设定螺旋线的坐标方程为:

X=30*COS(θ)+70*COS(θ/4)

Y=30*SIN(θ) - 70*SIN(θ/4)   (0≤θ≤8π)

将螺旋线的绘制过程进行动态展示,编写HTML文件如下。

<!DOCTYPE html>

<head>

<title>螺旋线</title>

<script type="text/javascript">

var context;

var i;

function draw(id)

{

var canvas = document.getElementById(id);

if (canvas == null)

return false;

context = canvas.getContext('2d');

context.fillStyle="#EEEEFF";

context.fillRect(0,0,300,300);

i=1;

setInterval(go,20);

}

function go()

{

context.strokeStyle="red";

context.lineWidth=2;

var x = 150+30*Math.cos(i*Math.PI/72) +70*Math.cos(i/4*Math.PI/72);

var y = 150+30*Math.sin(i*Math.PI/72) -70*Math.sin(i/4*Math.PI/72);

context.beginPath();

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

context.fillStyle = "red";

context.fill();

i=i+1;

if (i>576)

{

i=1;

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

}

}

</script>

</head>

<body onload="draw('myCanvas');">

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

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件,可以在浏览器窗口中看到螺旋线绘制动画,如图3所示。

图3  螺旋线绘制

4.七彩花瓣

设定四叶花瓣线的坐标方程为:

X=R*COS(2θ)*SIN(θ)

Y= R*COS(2θ)*COS(θ)   (0≤θ≤2π)

按这个方程,可以绘制如图4所示的四叶花瓣线。

图4 四叶花瓣线

将四叶花瓣线的绘制过程进行动态展示,并且每绘制一个新点,填充颜色在7中颜色间进行切换,这样绘制出七彩花瓣。编写HTML文件如下。

<!DOCTYPE>

<html>

<head>

<title>七彩花瓣</title>

</head>

<body >

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

</canvas>

<script>

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

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

var i=0;j=0.05,t=0;

var colors=new Array('red','orange','yellow','green','cyan','blue','purple');

function timing() {

t=t+1;

i=i+j;

var r=120*Math.cos(2*i);

if(t>6){t=0;}

var x=200+r*Math.sin(i);

var y=150+r*Math.cos(i);

context.beginPath();

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

context.fillStyle=colors[t];

context.fill();

if(i>6.3){j=-0.05;context.clearRect(0,0,400,300);}

if(i<0){j=0.05;context.clearRect(0,0,400,300);}

}

window.setInterval('timing()',200);

</script>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件,可以在浏览器窗口中看到七彩花瓣绘制动画,如图5所示。

图5  七彩花瓣

JavaScript动画实例:李萨如曲线的更多相关文章

  1. 用processing画李萨如曲线

    李萨如曲线 有没有对示波器上变化曲线产生过兴趣,它叫做李萨如曲线: 数学上,利萨茹(Lissajous)曲线(又称利萨茹图形.李萨如图形或鲍迪奇(Bowditch)曲线)是两个沿着互相垂直方向的正弦振 ...

  2. JavaScript动画实例:曲线的绘制

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

  3. JavaScript动画实例:递归分形图动态展示

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

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

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

  5. JavaScript动画实例:旋转的圆球

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

  6. JavaScript动画实例:动感小球

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

  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. [JavaScript] 两个数相除有余数时结果加1

    实现代码 ; ; ?(total/item):(Math.floor(total/item)+); console.log(page)

  2. SDNU_ACM_ICPC_2020_Winter_Practice_2nd

    A - [The__Flash]的矩阵 给你一个m×n的整数矩阵,在上面找一个x×y的子矩阵,使子矩阵中所有元素的和最大. Input输入数据的第一行为一个正整数T,表示有T组测试数据.每一组测试数据 ...

  3. dfs(迷宫)

    问题 J: 棋盘行走 时间限制: 1 Sec  内存限制: 128 MB[命题人:admin] 题目描述 小Biu在玩一个棋盘游戏,这个游戏给出一个n*m的棋盘,并且每个点上有一个棋子,棋子的颜色 用 ...

  4. 【PAT甲级】1086 Tree Traversals Again (25 分)(树知二求一)

    题意:输入一个正整数N(<=30),接着输入2*N行表示栈的出入(入栈顺序表示了二叉搜索树的先序序列,出栈顺序表示了二叉搜索树的中序序列),输出后序序列. AAAAAccepted code: ...

  5. JS知识点查漏补缺

    知识点1: 判断语句中遇到NaN即为 False 只需要注意遇到False即为False即可 使用join(),toString()皆可以将数组转化为字符串 二者的相同点在于都可以转化数组为字符串 二 ...

  6. Java AQS 的胡言乱语修正版

    前言 适合读者:3 年以上经验的同学 谈到并发编程,基本上都会想到JDK 的 JUC 工具包,它包含 锁,并发工具类,原子类,线程池,还有阻塞队列,这是从网上找的一个大致的知识体系. 相信这些工具读者 ...

  7. Java连载81-枚举类型,生成五个不重复的随机数,集合简介

    一.枚举类型 1.枚举类型的格式就是enum+枚举类型的名称,可见下面的例子. package com.bjpowernode.java_learning; ​ public class D81_1_ ...

  8. DOCKSWARM服务网络原理

    如图所示,我们将在 swarm 集群中部署 “client” 服务 和 “vote” 服务,其中 “vote” 服务部署多个副本. 客户端请求 “vote” 服务时,输出结果中包含服务端的容器 ID, ...

  9. 【Python】【Django】用户注册功能

    GET方法前置步骤做完 stu.models.py 再其中创建需要用到的字段及对应数据库的表 # -*- coding: utf-8 -*- from __future__ import unicod ...

  10. java代码开启关闭线程(nginx)

    源码: import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; pub ...