1。シンプルな織り柄
HTMLページにキャンバスを設定します。
<キャンバスID = "myCanvas" 幅= "360" 高さ= "240">
</キャンバス>
360 * 240帆布（キャンバス）、まだでは、これは、繊維の二重ループのパターンを描く上で定義されました。
基本的な考え方は、パターン描画される：行の8つのサブブロックに6枚のキャンバス、すなわち、各サブブロック60の幅、30の高さ。11描かれた水平または垂直線21リーバ各サブブロック内の規則に従って。
次のようにHTMLコードを用意することができます。
<！DOCTYPE HTML>
<ヘッド>
<タイトル>シンプルな布パターン</ TITLE>
ます。<script type = "text / javascriptの">
関数draw（ID）
{
VARキャンバス=のdocument.getElementById（ID）。
（キャンバス== null）の場合
falseを返します。
VARコンテキスト= canvas.getContext（ '2D'）;
context.fillStyle = "＃1 EEEEFF"。
context.fillRect（0,0,400,300）。
context.strokeStyle =「赤」。
context.lineWidth = 1。
context.beginPath（）;
私は0、J = = 0であり;
用（PX = 0; PX <360; PX + = 60）
{
I ++;
用（PY = 0; PY <240、PY + = 30）
{
J = J + 1 6％;
もし（I％2 == J％2）
{
用（K = 0; K <= 30; K + = 3）
{
context.moveTo（PX、PY + kの）;
context.lineTo（PX + 60、PY + kの）;
}
}
他
{
用（K = 0; K <= 60; K + = 3）
{
context.moveTo（PX + K、PY）。
context.lineTo（PXの+ kを、PY + 30）。
}
}
}
}
context.closePath（）;
context.stroke（）;
}
</ SCRIPT>
</ head>の
<ボディのonload = "（ 'myCanvas'）を描きます;">
<キャンバスのid =「myCanvas」幅=「360」高さ=「240」>お使いのブラウザはキャンバスをサポートしていません！
</キャンバス>
</ BODY>
</ HTML>
HTML形式のテキストファイルにHTMLコードを保存した後、ブラウザでHTMLファイルを備え、このHTMLコードを開くには、単にブラウザウィンドウで、図1に示したテキスタイルパターンを描画見ることができます。
図単純な織物パターン1
なお、図1、単純な織物柄、各小明らかとの間の分割線から見ました。ループJavaScriptプログラムであれば "の（; K <= 30、K = 0、K + = 3）" "（; K <30; K = 0、K + = 3）は、" 書き換え、すなわち、水平線を描画する場合わずか10を描画し、次にループ "のための（K = 0; K <= 60; K + = 3）" の書き換え（K = 0、K <60; K + = 3）、すなわち、垂直線を描く場合、のみ20を描きます。次に、図2に示すように、エンボス効果を有する織物パターンを示す、変更後のブラウザにHTMLファイルを開きます。
図2パターンエンボス織物効果を有します
2。プレス繊維分布パターン三角
上記織物パターンは、缶私はそれのいくつかの正規分布に従う間隔線を引くことは、水平又は垂直線との間に、直線が3離間されているかどうか、比較的簡単ですか？三角関数の計算間隔配電線を考慮すると、HTMLコードは次のように書き換えることができます。
<！DOCTYPE HTML>
<ヘッド>
<タイトル>三角関数によって繊維分布パターン</タイトル>
ます。<script type = "text / javascriptの">
関数draw（ID）
{
VARキャンバス=のdocument.getElementById（ID）。
（キャンバス== null）の場合
falseを返します。
VARコンテキスト= canvas.getContext（ '2D'）;
context.fillStyle = "＃1 EEEEFF"。
context.fillRect（0,0,400,300）。
context.strokeStyle =「赤」。
context.lineWidth = 1。
context.beginPath（）;
私は0、J = = 0であり;
用（PX = 0; PX <360; PX + = 60）
{
I ++;
用（PY = 0; PY <240、PY + = 30）
{
J = J + 1 6％;
もし（I％2 == J％2）
{
用（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）。
}
}
他
{
用（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>の
<ボディのonload = "（ 'myCanvas'）を描きます;">
<キャンバスのid =「myCanvas」幅=「360」高さ=「240」>お使いのブラウザはキャンバスをサポートしていません！
</キャンバス>
</ BODY>
</ HTML>
ブラウザは、このHTMLコードを含むHTMLファイルを開くに示す織物パターンを描画さ見ることができる。ブラウザウィンドウで3。
織物の分布パターンの三角関数に従って図3