设有坐标计算公式如下：

X=L*(1+SIN(4α))*COS(α)

Y=L*(1+SIN(4α))*SIN(α)

用循环依次取α值为0~2π，计算出X和Y,在canvas画布中对坐标位置（X,Y）描点，可绘制出一个曲线图形。编写HTML文件内容如下：

<!DOCTYPE html>

<head>

<title>曲线图形</title>

<script type="text/javascript">

function draw(id)

{

var canvas=document.getElementById(id);

if (canvas==null)

return false;

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

context.fillStyle="#EEEEFF";

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

for (i=0;i<=720;i++)

{

a=i*Math.PI/360;

e=80*(1+Math.sin(4*a));

x1=200+e*Math.cos(a);

y1=150+e*Math.sin(a);

context.fillText('.',x1,y1);

context.fillStyle="red";

}

}

</script>

</head>

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

<canvas id="myCanvas" width="400" height="300">您的浏览器不支持canvas！

</canvas>

</body>

</html>

上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出如图1所示的曲线。

图1  用三角函数绘制曲线

1．四瓣花型图案

先在HTML页面中设置一个画布。

<canvas id="myCanvas" width="400" height="300">

</canvas>

再在定义的这块400*300的canvas（画布）上面用循环（0~2π）绘制四瓣花型图案。

绘制图案的基本思想是：

设立坐标计算公式如下：

X1=L*(1+SIN(4α))*COS(α)

Y1=L*(1+SIN(4α))*SIN(α)

X2=L*(1+SIN(4α))*COS(α+π/5)

Y2=L*(1+SIN(4α))*SIN(α+π/5)

以（X1,Y1）和（X2,Y2）作为端点坐标绘制直线段。

可编写如下的HTML代码。

<!DOCTYPE html>

<head>

<title>四瓣花型图案</title>

<script type="text/javascript">

function draw(id)

{

var canvas=document.getElementById(id);

if (canvas==null)

return false;

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

context.fillStyle="#EEEEFF";

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

context.strokeStyle="red";

context.lineWidth=1;

context.beginPath();

for (i=0;i<=720;i++)

{

a=i*Math.PI/360;

e=80*(1+Math.sin(4*a));

x1=200+e*Math.cos(a);

x2=200+e*Math.cos(a+Math.PI/5);

y1=150+e*Math.sin(a);

y2=150+e*Math.sin(a+Math.PI/5);

context.moveTo(x1,y1);

context.lineTo(x2,y2);

}

context.closePath();

context.stroke();

}

</script>

</head>

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

<canvas id="myCanvas" width="400" height="300">您的浏览器不支持canvas！

</canvas>

</body>

</html>

将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出如图2所示的四瓣花型图案。

图2  四瓣花型图案

在上面的代码中语句“e=80*(1+Math.sin(4*a));”中的4表示绘制四瓣花型图案，若将4改写为3~8之间的任一整数，可以画出3~8瓣花型图案，如图3所示。

图3  3瓣花型、5瓣花型、6瓣花型图案

2．瓣顶有折皱的四瓣花型图案

我们可以给绘制的花瓣图案加上变形系数，即把前面的代码中的语句“e=80*(1+Math.sin(4*a));”改写为“e=80*(1+Math.sin(12*a));”。完整的HTML代码如下。

<!DOCTYPE html>

<head>

<title>瓣顶有折皱的四瓣花型图案</title>

<script type="text/javascript">

function draw(id)

{

var canvas=document.getElementById(id);

if (canvas==null)

return false;

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

context.fillStyle="#EEEEFF";

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

context.strokeStyle="red";

context.lineWidth=1;

context.beginPath();

for (i=0;i<=720;i++)

{

a=i*Math.PI/360;

e=80*(1+Math.sin(12*a)/4);

f=e*(1+Math.sin(4*a));

x1=200+f*Math.cos(a);

x2=200+f*Math.cos(a+Math.PI/5);

y1=150-f*Math.sin(a);

y2=150-f*Math.sin(a+Math.PI/5);

context.moveTo(x1,y1);

context.lineTo(x2,y2);

}

context.closePath();

context.stroke();

}

</script>

</head>

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

<canvas id="myCanvas" width="400" height="300">您的浏览器不支持canvas！

</canvas>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出如图4所示的瓣顶有折皱的四瓣花型图案。

图4  瓣顶有折皱的四瓣花型图案

将上面JavaScript代码中的语句“e=80*(1+Math.sin(12*a)/4);”改写为“e=80*(1+Math.cos(12*a)/4);”即SIN函数改用COS函数，将在浏览器窗口中绘制出如图5所示的变形四瓣花型图案1。

图5  变形的四瓣花型图案1

若再将JavScript代码中的

语句“y1=150-f*Math.sin(a);”改写为“y1=150-f*Math.sin(a)/2;”，

语句“y2=150-f*Math.sin(a+Math.PI/5);”改写为“y2=150-f*Math.sin(a+Math.PI/5)/2;”，即图形的垂直方向上压缩一半，将在浏览器窗口中绘制出如图6所示的变形四瓣花型图案2。

图6  变形的四瓣花型图案2

3．可设置参数的变形的多瓣花型图案

从上面的程序运行示例可以看出，绘制花瓣图案时，可以设置花瓣数，还可以设置花瓣的变形系数。我们可以通过在浏览器窗口的页面中输入相应参数值，然后单击“确定”按钮绘制花瓣图案。编写的HTML文件如下。

<!DOCTYPE html>

<head>

<title>可设置参数的变形的多瓣花型图案</title>

<script type="text/javascript">

function draw(id)

{

var canvas=document.getElementById(id);

if (canvas==null)

return false;

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

context.fillStyle="#EEEEFF";

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

context.strokeStyle="red";

context.lineWidth=1;

context.beginPath();

var n=eval(document.myForm.petalNum.value);

var k=eval(document.myForm.shape.value);

for (i=0;i<=720;i++)

{

a=i*Math.PI/360;

e=80*(1+Math.sin(n*k*a)/4);

f=e*(1+Math.sin(n*a));

x1=200+f*Math.cos(a);

x2=200+f*Math.cos(a+Math.PI/5);

y1=150-f*Math.sin(a);

y2=150-f*Math.sin(a+Math.PI/5);

context.moveTo(x1,y1);

context.lineTo(x2,y2);

}

context.closePath();

context.stroke();

}

</script>

</head>

<body>

<form name="myForm">

花瓣数<input type=number name="petalNum" value=4 size=3>

变形系数：<input type=number name="shape" value=1 size=3>

<input type=button value="确定" onClick="draw('myCanvas');">

</form><br>

<canvas id="myCanvas" width="500" height="300">您的浏览器不支持canvas！

</canvas>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，在表单的“花瓣数”数字框中输入“4”，“变形系数”数字框中输入“2”，单击“确定”按钮，可以看到在浏览器窗口中绘制出如图7所示的变形四瓣花型图案3。若在表单的“花瓣数”数字框中输入“5”，“变形系数”数字框中输入“3”，单击“确定”按钮，可以看到在浏览器窗口中绘制出如图8所示的变形五瓣花型图案。

图7  变形的四瓣花型图案3

图8 变形的五瓣花型图案

4．其它变形的四瓣花型图案

实际上，我们还可以修改程序中变量e、f的计算表达式，绘制出更另类的四瓣花型图案。例如，可以编写如下的HTML代码。

<!DOCTYPE html>

<head>

<title>其它变形的四瓣花型图案</title>

<script type="text/javascript">

function draw(id)

{

var canvas=document.getElementById(id);

if (canvas==null)

return false;

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

context.fillStyle="#EEEEFF";

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

context.strokeStyle="red";

context.lineWidth=1;

context.beginPath();

for (i=0;i<=720;i++)

{

a=i*Math.PI/360;

e=80*(1+Math.cos(12*a)/3);

f=e*(1+Math.sin(4*a)*3/7);

x1=200+f*Math.cos(a);

x2=200+f*Math.cos(a+Math.PI/3);

y1=150-f*Math.sin(a);

y2=150-f*Math.sin(a+Math.PI/3);

context.moveTo(x1,y1);

context.lineTo(x2,y2);

}

context.closePath();

context.stroke();

}

</script>

</head>

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

<canvas id="myCanvas" width="400" height="300">您的浏览器不支持canvas！

</canvas>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出如图9所示的另类变形的四瓣花型图案。

图9  另类变形的四瓣花型图案

5．四瓣花型图案绘制过程的动态展示

我们可以将四瓣花型图案绘制过程进行动态展示，编写HTML文件如下。

<!DOCTYPE html>

<head>

<title>四瓣花型图案绘制过程的动态展示</title>

<script type="text/javascript">

var context;

var n;

function draw(id)

{

var canvas = document.getElementById(id);

if (canvas == null)

return false;

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

context.fillStyle="#EEEEFF";

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

n=0;

setInterval(go,50);

}

function go()

{

n=n+1;

if (n>720)

{

n=0;

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

}

context.strokeStyle="red";

context.lineWidth=1;

context.beginPath();

a=n*Math.PI/360;

e=80*(1+Math.sin(4*a));

x1=200+e*Math.cos(a);

x2=200+e*Math.cos(a+Math.PI/5);

y1=150+e*Math.sin(a);

y2=150+e*Math.sin(a+Math.PI/5);

context.moveTo(x1,y1);

context.lineTo(x2,y2);

context.closePath();

context.stroke();

}

</script>

</head>

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

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

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中看到四瓣花型图案的动态绘制过程，如图10所示。

图10  四瓣花型图案的动态绘制过程

JavaScript图形实例：四瓣花型图案的更多相关文章

  1. JavaScript图形实例：圆形图案

    在HTML5的Canvas 2D API中,可以调用arc方法绘制圆或圆弧.该方法调用格式为: context . arc(x, y, radius, startAngle, endAngle, an ...

  2. JavaScript图形实例：窗花图案

    1．窗花基本框线 设定曲线的坐标方程为: n=25; r=100; x=r/n*cos(5*θ)+r*cos(θ); y=r/n*sin(5*θ)+r*sin(θ);          (0≤θ≤2π ...

  3. JavaScript图形实例：线段构图

    在“JavaScript图形实例:四瓣花型图案”和“JavaScript图形实例:蝴蝶结图案”中,我们绘制图形时,主要采用的方法是先根据给定的曲线参数方程计算出两点坐标,然后将两点用线段连接起来,线段 ...

  4. JavaScript图形实例：图形放大镜效果

    1. 基本四瓣花型图案 根据四瓣花卉线的参数方程: t= r*(1+sin(12*θ)/5)*(0.5+sin(4*θ)/2); x=t*cos(θ)); y=t*sin(θ)); 编写如下的HTML ...

  5. JavaScript图形实例：再谈IFS生成图形

    在“JavaScript图形实例:迭代函数系统生成图形”一文中,我们介绍了采用迭代函数系统(Iterated Function System,IFS)创建分形图案的一些实例.在该文中,仿射变换函数W的 ...

  6. JavaScript图形实例：随机SierPinski三角形

    在“JavaScript图形实例:SierPinski三角形”中,我们介绍了SierPinski三角形的基本绘制方法,在“JavaScript图形实例:迭代函数系统生成图形”一文中,介绍了采用IFS方 ...

  7. JavaScript图形实例：图形的扇形变换和环形变换

    1.1  扇形变换 将如图1所示的上边长方形的图形变换为下边的扇形图形的变换称为扇形变换. 设长方形图形中任一点P1(X1,Y1)变换为扇形图形上的点P2(X2,Y2),长方形的长为X,扇形圆心坐标为 ...

  8. JavaScript图形实例：图形的平移和对称变换

    1.1  六瓣花平移变换 平移变换是指图形从一个位置到另一个位置所作的直线移动.如果要把一个位于P(x,y)的点移到新位置P’(x’,y’),如图1,则只要在原坐标上加上平移距离Tx和Ty即可. 即  ...

  9. JavaScript图形实例：迭代函数系统生成图形

    迭代函数系统(Iterated Function System,IFS)可以用来创建分形图案,它是分形理论的重要分支,也是分形图形处理中最富生命力而且最具有广阔应用前景的领域之一.这一工作最早可以追溯 ...

随机推荐

  1. 【日常错误】spring-boot配置文件读取不到

    最近在用spring-boot做项目时,遇到自定义的配置文件无法读取到的问题,通过在appcation.java类上定义@PropertySource(value = {"classpath ...

  2. .NET Core开发的iNeuOS工业互联网平台，发布 iNeuDA 数据分析展示组件，快捷开发图形报表和数据大屏

    目       录 1.      概述... 2 2.      演示信息... 2 3.      简单介绍... 3 4.      产品特点... 4 5.      价值体现... 5 1. ...

  3. 【数据结构】之栈（Java语言描述）

    在前面的[这篇文章]中,我简单介绍了栈这种数据结构的操作功能,并使用C语言对其进行了代码的编写. Java的JDK中默认为我们提供了栈这种数据结构的API—— Stack . Java中的Stack类 ...

  4. Mac下PHP连接MySQL报错＂No such file or directory＂的解决办法

    首先做个简短的介绍. [说明1]MAC下MYSQL的安装路径: /usr/local/mysql-5.1.63-osx10.6-x86_64 数据库的数据文件在该目录的data文件夹中: 命令文件在b ...

  5. C # socket 实例

    同步客户端存储示例 下面的示例程序创建连接到服务器的客户端.             客户端使用一个同步套接字生成,因此,客户端应用程序的执行挂起,直到服务器返回响应.  应用程序将字符串发送到服务器 ...

  6. 线程池&进程池

    线程池&进程池 池子解决什么问题? 1.创建/销毁线程伴随着系统开销,如果过于频繁会影响系统运行效率 2.线程并发数量过多,抢占系统资源,从而导致系统阻塞甚至死机 3.能够刚好的控制和管理池子 ...

  7. Android Jni开发，报com.android.ide.common.process.ProcessException: Error configuring 错误解决方案

    今天在练习JNI项目时,Android studio版本为:3.1.3,Gradle版本为4.4.由于Android studio 3.X弃用了 android.useDeprecatedNdk=tr ...

  8. 请问1^x+2^x+3^x+\cdots +n^x的算式是什么呢？

    目录 总结 请问\(1^x+2^x+3^x+\cdots +n^x\)的算式是什么呢? 一.求和式\(\sum\limits_{i=1}^n{i}\)的算式 如何证明求和简式\(\sum_{i=1}^ ...

  9. firefox-5.x关于img标签的load事件、svg、ff5.4audio标签显示的适配tip

    1.firefox中img标签的load事件后获取图片宽高错误. 需求是根据图片加载后的大小宽高比,调整图片显示的宽高. 在chrome浏览器下,使用jquery的load方法监听img标签的&quo ...

  10. mac端口占用

    lsof -i tcp:port 可以查看该端口被什么程序占用,并显示PID port 替换成端口号, eg: lsof -i tcp:8081 kill pid 杀死PID