1．簡單紡織物圖案
先在HTML頁面中設定一個畫布，
<canvas id="myCanvas" width="360" height="240">
</canvas>
再在定義的這塊360*240的canvas（畫布）上面用二重回圈繪制紡織物圖案，
繪制圖案的基本思想是：將畫布分成6行8列的子塊，即每個子塊的寬度為60，高度為30，在每個子塊中按規律交錯地繪制11條橫線或21條豎線，
可撰寫如下的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 i=0,j=0;
for (px=0;px<360;px+=60)
{
i++;
for (py=0; py<240; py+=30)
{
j=j%6+1;
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 onl oad="draw('myCanvas');">
<canvas id="myCanvas" width="360" height="240">您的瀏覽器不支持canvas！
</canvas>
</body>
</html>
將上述HTML代碼保存到一個html文本檔案中，再在瀏覽器中打開包含這段HTML代碼的html檔案，可以看到在瀏覽器視窗中繪制出如圖1所示的簡單紡織物圖案，
圖1 簡單紡織物圖案
由圖1看出，在簡單紡織物圖案中，每個小塊之間的分割線條很明顯，若將JavaScript程式中的回圈陳述句“for (k=0;k<=30;k+=3)”改寫為“for (k=0;k<30;k+=3)”，即如果繪制橫線，只繪制10條；再將回圈陳述句“for (k=0;k<=60;k+=3)”改寫為for (k=0;k<60;k+=3)，即如果繪制豎線，只繪制20條，再在瀏覽器中打開修改后的HTML檔案，顯示出一個具有凸凹效果的紡織物圖案，如圖2所示，
圖2 具有凸凹效果的紡織物圖案
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 i=0,j=0;
for (px=0;px<360;px+=60)
{
i++;
for (py=0; py<240; py+=30)
{
j=j%6+1;
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 onl oad="draw('myCanvas');">
<canvas id="myCanvas" width="360" height="240">您的瀏覽器不支持canvas！
</canvas>
</body>
</html>
在瀏覽器中打開包含這段HTML代碼的html檔案，可以看到在瀏覽器視窗中繪制出如圖3所示的紡織物圖案，
圖3 按三角函式分布的紡織物圖案
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/17746.html
標籤：其他