Coordinate with the following formula:
X = L * (1 + SIN (4?)) * COS (a)
Y = L * (1 + SO (4α)) * SO (α)
Cycle is successively extracted with α 0 ~ 2π, calculates the X and Y, in the canvas in the canvas coordinate position (X, the Y) plot points, can draw a curved pattern. HTML file is written as follows:
<!DOCTYPE html>
<head>
<Title> curve pattern </ 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;
He = 80 * (1 + Math.sin (4 * a));
x1=200+e*Math.cos(a);
y1 = 150 + a * Math.sin (a);
context.fillText('.',x1,y1);
context.fillStyle="red";
}
}
</script>
</head>
<body onload="draw('myCanvas');">
<Canvas id = "myCanvas" width = "400" height = "300"> Your browser does not support the canvas!
</canvas>
</body>
</html>
Stores the HTML code to an html text file, and then open this HTML code comprising html file in the browser, you can be seen plotted curves illustrated in FIG. 1 in a browser window.
A trigonometric function plotted in FIG.
1. Four flower pattern
To set up a canvas in an HTML page.
<canvas id="myCanvas" width="400" height="300">
</canvas>
In this canvas then defined 400 * 300 (canvas) The above drawing of flower pattern with four cycles (0 ~ 2π).
The basic idea is to draw a pattern:
The formula established the following coordinates:
X1 = L * (1 + SIN (4?)) * COS (a)
Y1 = L * (1 + SIN (4?)) * SIN (a)
X2 = L * (1 + SIN (4?)) * COS (a + pi / 5)
Y2 = L * (1 + SIN (4?)) * SIN (a + pi / 5)
To (X1, Y1) and (X2, Y2) as the coordinates of endpoints of a straight line segment drawn.
HTML code may be prepared as follows.
<!DOCTYPE html>
<head>
<Title> four flower pattern </ 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;
He = 80 * (1 + Math.sin (4 * a));
x1=200+e*Math.cos(a);
x2=200+e*Math.cos(a+Math.PI/5);
y1 = 150 + a * Math.sin (a);
y2 = 150 + a * 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"> Your browser does not support the canvas!
</canvas>
</body>
</html>
To store the HTML code to an html text file, and then open a html file this HTML code in a browser can be seen drawn four flower pattern illustrated in FIG. 2 in a browser window.
2 four flower pattern
In the above code statement "e = 80 * (1 + Math.sin (4 * a));" 4 represents a drawing four flower pattern, if any between 4 is rewritten to an integer from 3 to 8 , 3 to 8 can be drawn flower pattern, as shown in FIG.
Figure 3 pattern 3, 5 flowers, flower pattern 6
2. Flap top wrinkled four flower pattern
We can add to the rendering leaf design modification coefficient, i.e., the preceding code statement "e = 80 * (1 + Math.sin (4 * a));" rewritten "e = 80 * (1 + Math .sin (12 * a)); ". Complete the following HTML code.
<!DOCTYPE html>
<head>
<Title> Top flap wrinkled four flower pattern </ 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;
He = 80 * (1 + Math.sin (12 * a) / 4);
f = a * (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 Math.sin-f * (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"> Your browser does not support the canvas!
</canvas>
</body>
</html>
Open the html file contain this HTML code in a browser can be seen drawn flap shown in FIG. 4 wrinkled four flower pattern in a browser window.
FIG 4 is a top wrinkled four flower pattern
The above JavaScript code statement "e = 80 * (1 + Math.sin (12 * a) / 4);" rewritten "e = 80 * (1 + Math.cos (12 * a) / 4); "i.e. COS function SIN function switch, the drawn modification four flower pattern 1 shown in FIG. 5 in a browser window.
FIG deformation four flower pattern 1
If the number of code JavScript
Statement "y1 = 150-f * Math.sin (a);" rewritten "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文件，可以看到在浏览器窗口中看到四瓣花型图案的动态绘制过程。