In " the JavaScript graphic instance: four flower pattern " and " the JavaScript graphic instance: bow pattern " in our drawing graphics, the method mainly used is first calculated from the given curve parameter equation of two coordinates, and then the two connect the dots with a line, the line would constitute a collection of exquisite pieces of graphics. Let's continue to give some examples of using graphics segment structure, for everyone to enjoy and learn from.
1. Moire patterns
Curve is set coordinate equation:
b=r*(1+ sin(2.5*θ)/2);
x1=b*cos(θ);
x2 = b * cos (i + n / 4)?
y1=b* sin(θ);
y2 = b * sin (i + n / 4)? (0≤th≤4p)
Start at 0 ~ 4π interval from θ = 0, every π / 180 to obtain coordinate values of two points (x1, y1) and (x2, y2) by the equation of the curve, and the two together into a determined segments, so that moiré patterns can be drawn.
Write HTML code below.
<!DOCTYPE html>
<head>
<Title> Moire patterns </ 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/180;
He = 100 * (1 + Math.sin (2.5 * a) / 2);
x1=200+e*Math.cos(a);
x2=200+e*Math.cos(a+Math.PI/4);
y1 = 150-a * Math.sin (a);
y2 = 150-a * Math.sin (a + Math.PI / 4);
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>
</body>
</html>
To store the HTML code to an html text file, and then open this HTML code comprising html file in the browser, it can be seen in the canvas drawn moire patterns, as shown in FIG.
FIG 1 moire patterns
2. Ring plate pattern
Curve is set coordinate equation:
d=100
e=50
m=d+d/3*(1+cos(8*i*dig)/2)*cos(i*dig);
n = e + e / 2 * (1 + sin (i * 8 * you) / 2) * cos (i * you);
x1=5*m*cos(i*dig)/4;
x2 = 5 * n * cos (i * you) / 4;
p = d + D / 3 * (1 + cos (10 * in * you) / 2) * sin (i * you);
q = E + E / 2 * (1 + cos (8 * in * you) / 2) * sin (i * you);
y 1 = p * sin (i * you);
Y 2 = q * sin (i * you); (0≤θ≤2π)
Start at 0 ~ 2π interval from θ = 0, every π / 128 to obtain coordinate values of two points (x1, y1) and (x2, y2) by the equation of the curve, and the two together into a determined segments, so that the pattern can be drawn sheet ring.
Write HTML code below.
<!DOCTYPE html>
<head>
<Title> sheet to form a ring segment </ 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,300,300);
context.strokeStyle="red";
context.lineWidth=2;
were you = Math.PI / 128;
context.beginPath ();
There are d = 100; E = 50;
for (var i=0;i<=256;i++)
{
m=d+d/3*(1+Math.cos(8*θ)/2)*Math.cos(θ);
n = e + a / 2 * (1 + Math.sin (8 * θ) / 2) * Math.cos (θ);
x1=100+5*m*Math.cos(θ)/4;
x2=100+5*n*Math.cos(θ)/4;
p = d + d / 3 * (1 + Math.cos (10 * θ) / 2) * Math.sin (θ);
q = a + a / 2 * (1 + Math.cos (8 * θ) / 2) * Math.sin (θ);
y1=160-p*Math.sin(θ);
y2=160-q*Math.sin(θ);
context.moveTo(x1,y1);
context.lineTo(x2,y2);
}
context.closePath();
context.stroke();
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="300" height="300"></canvas>
</body>
</html>
To store the HTML code to an html text file, and then open this HTML code comprising html file in the browser, it can be seen in the drawing canvas sheet ring pattern composed of line segments, as shown in FIG.
FIG 2 ring plate pattern line segments
3. Three-dimensional fringe pattern
By constructing parametric curve equation, to write the following HTML document can be drawn with a three-dimensional fringe pattern. Specific code below the curve equation content.
<!DOCTYPE html>
<head>
<Title> perspective stripe 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,600,400);
context.strokeStyle="red";
context.lineWidth=1;
context.save();
context.translate(300,200);
context.beginPath ();
for (theta=0;theta<=2*Math.PI;theta+=Math.PI/160)
{
x1=30*Math.cos(theta);
y1=15*Math.sin(theta);
a=60*(1+Math.sin(3*theta)/6);
b=100*(1+Math.sin(4*theta)/6);
c=140*(1+Math.sin(5*theta)/6);
d=180*(1+Math.sin(6*theta)/8);
x2=a*Math.cos(theta+Math.PI/20);
y2=a*Math.sin(theta+Math.PI/20);
x3=b*Math.cos(theta);
y3=b*Math.sin(theta);
x4=c*Math.cos(theta+Math.PI/20);
y4=c*Math.sin(theta+Math.PI/20);
x5=1.5*d*Math.cos(theta);
y5=d*Math.sin(theta);
context.moveTo(x1,y1);
context.lineTo(x2,y2);
context.lineTo(x3,y3);
context.lineTo(x4,y4);
context.lineTo(x5,y5);
}
context.stroke();
context.restore();
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="600" height="400"></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, the canvas can be seen in a perspective drawing a stripe pattern composed of line segments, as shown in FIG.
FIG 3 dimensional fringe pattern