1. Simple woven pattern
To set up a canvas in an HTML page.
<canvas id="myCanvas" width="360" height="240">
</canvas>
In yet Canvas (canvas) 360 * 240 this defined above drawing pattern for textile double loop.
The basic idea is drawing pattern: 6 canvas into eight sub-blocks of rows, i.e., the width of each sub-block 60, a height of 30. In accordance with the rules in each sub-block interleaver 11 drawn horizontal or vertical line 21.
HTML code may be prepared as follows.
<!DOCTYPE html>
<head>
<Title> simple textile 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 ();
where i = 0, j = 0;
for (px=0;px<360;px+=60)
{
i++;
for (py = 0; py <240; py + = 30)
{
j = j + 1 6%;
if (i%2==j%2)
{
for (k=0;k<=30;k+=3)
{
context.moveTo(px,py+k);
context.lineTo(px+60,py+k);
}
}
else
{
for (k=0;k<=60;k+=3)
{
context.moveTo(px+k,py);
context.lineTo(px+k,py+30);
}
}
}
}
context.closePath();
context.stroke();
}
</script>
</head>
<body onload="draw('myCanvas');">
<Canvas id = "myCanvas" width = "360" height = "240"> Your browser does not support the canvas!
</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, you can be seen simply draw a textile pattern shown in Figure 1 in a browser window.
FIG simple textile pattern 1
It is seen from Figure 1, a simple textile pattern, the dividing line between each small apparent. If loop JavaScript program "for (k = 0; k <= 30; k + = 3)" rewritten "for (k = 0; k <30; k + = 3)", i.e., if drawing a horizontal line, drawing 10 only; then the loop "for (k = 0; k <= 60; k + = 3)" rewritten for (k = 0; k <60; k + = 3), i.e., if the draw a vertical line, only draw 20. Then open the HTML file in a browser after the modification, showing a textile pattern having embossed effect, as shown in FIG.
FIG 2 having a pattern embossed textile effect
2. Press textile distribution pattern trigonometric
The above textile pattern is relatively simple, whether it is between horizontal or vertical lines, straight lines are spaced 3, Can I draw the line spacing according to some regular distribution of it? Considering the distribution line interval trigonometric calculations, HTML code can be rewritten as follows.
<!DOCTYPE html>
<head>
<Title> textile distribution pattern by a trigonometric function </ 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 ();
where i = 0, j = 0;
for (px=0;px<360;px+=60)
{
i++;
for (py = 0; py <240; py + = 30)
{
j = j + 1 6%;
if (i%2==j%2)
{
for (k=0;k<=15;k++)
{
y = 30-30 Math.sin * (k * Math.PI / 15);
context.moveTo(px,py+y);
context.lineTo(px+60,py+y);
}
}
else
{
for (k=0;k<=25;k++)
{
x=30-30*Math.cos(k*Math.PI/25);
context.moveTo(px+x,py);
context.lineTo(px+x,py+30);
}
}
}
}
context.closePath();
context.stroke();
}
</script>
</head>
<body onload="draw('myCanvas');">
<Canvas id = "myCanvas" width = "360" height = "240"> 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 textile pattern shown in FIG. 3 in a browser window.
FIG 3 according to a trigonometric function of the distribution pattern of woven fabric