JavaScript图形实例：四瓣花型图案

设有坐标计算公式如下：

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 >

<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 >

<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 >

<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 >

<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 >

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

</body>

</html>

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

原文地址：https://www.cnblogs.com/cs-whut/p/12065682.html

时间： 2024-11-13 09:32:16

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

JavaScript图形实例：纺织物图案

1．简单纺织物图案 先在HTML页面中设置一个画布. <canvas id="myCanvas" width="360" height="240"> </canvas> 再在定义的这块360*240的canvas(画布)上面用二重循环绘制纺织物图案. 绘制图案的基本思想是:将画布分成6行8列的子块,即每个子块的宽度为60,高度为30.在每个子块中按规律交错地绘制11条横线或21条竖线. 可编写如下的HTML代码. <

JavaScript图形实例：图形的旋转变换

旋转变换:图形上的各点绕一固定点沿圆周路径作转动称为旋转变换.可用旋转角表示旋转量的大小. 旋转变换通常约定以逆时针方向为正方向.最简单的旋转变换是以坐标原点(0,0)为旋转中心,这时,平面上一点P(x,y) 旋转了θ之后,变成点P’(x,y) ,如图1所示. 图1 点P逆时针旋转 由三角关系可得: 平面上一点P(x,y)若按顺时针方向旋转了θ之后,变成点P’(x,y) ,如图2所示. 图2 点P顺时针旋转 由三角关系可得: 1．三角形旋转 先绘制一个三角形,然后将该三角形依次顺时针旋转45°,

JavaScript图形实例：正弦曲线

正弦曲线的坐标方程为: Y=A*SIN(X)    (A为振幅) 1．正弦曲线 在弧度为0~4π的正弦曲线上取360个点,将这些点用线连接起来,可以绘制出正弦曲线.编写如下的HTML代码. <!DOCTYPE html> <head> <title>正弦曲线的绘制</title> <script type="text/javascript"> function draw(id) { var canvas=document.ge

JavaScript图形实例：七彩线团

1．线团图案 设立坐标计算公式为: X=R1*COS(3α)+R2*COS(14α)) Y=R1*SIN(3α)+R2 *SIN(14α)) 再用循环依次取α值为0~2π(每次增量为0.01),计算出X和Y,在canvas画布中将坐标点(X,Y)用线连起来,可绘制出一个封闭曲线图形,可得到一个线团图案. 编写如下的HTML代码. <!DOCTYPE> <html> <head> <title>线团</title> </head> &l

JavaScript图形实例：五角星

1．五角星 在半径为80的圆周上取5个点,用这5个点依次首尾连接画5条线,可以绘制出一个五角星图案. 编写如下的HTML代码. <!DOCTYPE html> <head> <title>五角星(一)</title> <script type="text/javascript"> function draw(id) { var canvas=document.getElementById(id); if (canvas==nu

JavaScript动画实例：李萨如曲线

在“JavaScript图形实例:阿基米德螺线”和“JavaScript图形实例:曲线方程”中,我们学习了利用曲线的方程绘制曲线的方法.如果想看看曲线是怎样绘制出来的,怎么办呢?编写简单的动画,就可以展示指定曲线的绘制过程. 1．李萨如曲线 设定李萨如曲线的坐标方程为: X=SIN(2θ) Y=SIN(3θ)     (0≤θ≤2π) 将0~2π区间等分512段,取θ的初始值π/256,按曲线方程求得坐标值(x,y),并在当前坐标处通过绘制一个实心圆的方式描点.之后每隔0.02秒,将θ的初始值加

在JavaScript中判断整型的N种方法

整数类型(Integer)在JavaScript经常会导致一些奇怪的问题.在ECMAScript的规范中,他们只存在于概念中: 所有的数字都是浮点数,并且整数只是没有一组没有小数的数字. 在这篇博客中,我会解释如何去检查某个值是否为整型. ECMAScript 5 在ES5中有很多方法你可以使用.有时侯,你可能想用自己的方法:一个isInteger(x)的函数,如果是整型返回true,否则返回false. 让我们看看一些例子. 通过余数检查 你可以使用余数运算(%),将一个数字按1求余,看看余数

Win10系列：JavaScript综合实例1

上面几个小节讲解了使用HTML5和JavaScript语言开发Windows 应用商店应用时会用到的一些技术,本小节将前面介绍的知识融合在一起创建一个菜谱应用程序,帮助读者更进一步地理解和掌握这些知识. 此菜谱应用程序主要的功能是介绍一些菜肴和主食的做法,其中包含三个页面:第一个页面为主页面,用于按类别显示一些菜肴和主食:第二个页面为分类页面,显示某个类别的信息和属于该类别的菜肴或主食:第三个页面为菜肴页面,显示某项菜肴或主食的详细信息,如名称.图片和具体做法.这三个页面可以相互跳转,例如,在主

JavaScript 32位整型无符号操作

在 JavaScript 中,所有整数字变量默认都是有符号整数,这意味着什么呢? 有符号整数使用 31 位表示整数的数值,用第 32 位表示整数的符号,0 表示正数,1 表示负数. 数值范围从 -2^31 - 2^31-1 即 -2147483648 到 2147483647. JavaScript 进行位操作时,是采用32位 有符号 整型,这意味着其转换的结果也是32位有符号整型. 有些时候,我们进行移位会出现意想不到的结果,以下是C语言 与 JS 的对比. C语言 1 unsigned in