JavaScript圖形實例：紡織物圖案

時間 2019-12-19

標籤 javascript 圖形實例紡織物圖案欄目 JavaScript 简体版

原文原文鏈接

1．簡單紡織物圖案

先在HTML頁面中設置一個畫布。javascript

<canvas id="myCanvas" width="360" height="240">html

</canvas>java

再在定義的這塊360*240的canvas（畫布）上面用二重循環繪製紡織物圖案。canvas

繪製圖案的基本思想是：將畫布分紅6行8列的子塊，即每一個子塊的寬度爲60，高度爲30。在每一個子塊中按規律交錯地繪製11條橫線或21條豎線。瀏覽器

可編寫以下的HTML代碼。函數

<!DOCTYPE html>htm

<head>blog

<title>簡單紡織物圖案</title>ip

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>

<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 具備凸凹效果的紡織物圖案